html - quede - Como superponer un div sobre otro div
superponer div bootstrap (7)
Aquí hay un ejemplo simple para traer efecto de superposición con el ícono de carga sobre otra div
<style>
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: black url(''icons/loading.gif'') center center no-repeat; /* Make sure the path and a fine named ''loading.gif'' is there*/
background-size: 50px;
z-index: 1;
opacity: .6;
}
.wraper{
position: relative;
width:400px; /* Just for testing, remove width and height if you have content inside this div*/
height:500px; /*Remove this if you have content inside*/
}
</style>
<h2>The overlay tester</h2>
<div class="wraper">
<div id="overlay"></div>
<h3>Apply the overlay over this div</h3>
</div>
Pruébelo aquí http://jsbin.com/fotozolucu/edit?html,css,output
Necesito ayuda para superponer un div individual sobre otro div individual.
Mi código se ve así:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
Desafortunadamente no puedo anidar el div#infoi o el img , dentro del primer div.navi .
div#infoi ser dos div separados como se muestra, pero necesito saber cómo puedo colocar div#infoi sobre div.navi y, a la derecha, más hacia el lado central y centrado sobre el div.navi .
Aquí sigue una solución simple 100% basada en CSS. El "secreto" es usar la display: inline-block en display: inline-block en el elemento de envoltura. La vertical-align: bottom de la imagen es un truco para superar el relleno de 4px que algunos navegadores agregan después del elemento.
Consejo : si el elemento antes de la envoltura está en línea, pueden quedar anidados. En este caso, puede "envolver la envoltura" dentro de un contenedor con display: block - generalmente un div antiguo y bueno.
.wrapper {
display: inline-block;
position: relative;
}
.hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 188, 212, 0);
transition: background-color 0.5s;
}
.hover:hover {
background-color: rgba(0, 188, 212, 0.8);
// You can tweak with other background properties too (ie: background-image)...
}
img {
vertical-align: bottom;
}
<div class="wrapper">
<div class="hover"></div>
<img src="http://placehold.it/450x250" />
</div>
Esto es lo que necesitas:
function showFrontLayer() {
document.getElementById(''bg_mask'').style.visibility=''visible'';
document.getElementById(''frontlayer'').style.visibility=''visible'';
}
function hideFrontLayer() {
document.getElementById(''bg_mask'').style.visibility=''hidden'';
document.getElementById(''frontlayer'').style.visibility=''hidden'';
}
#bg_mask {
position: absolute;
top: 0;
right: 0; bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 70px 140px 175px 140px;
padding : 30px;
width: 700px;
height: 400px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style>
<html>
<head>
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
</head>
<body>
<form action="test.html">
<div id="baselayer">
<input type="text" value="testing text"/>
<input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click ''Show front layer'' button<br/><br/><br/>
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
<div id="bg_mask">
<div id="frontlayer"><br/><br/>
Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
Use position: absolute to get the one div on top of another div.<br/><br/><br/>
The bg_mask div is between baselayer and front layer.<br/><br/><br/>
In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
<input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
</div>
</div>
</div>
</form>
</body>
</html>
La solución aceptada funciona muy bien, pero IMO carece de una explicación de por qué funciona. El siguiente ejemplo se resume en los conceptos básicos y separa el CSS importante del CSS de estilo no relevante. Como beneficio adicional, también he incluido una explicación detallada de cómo funciona el posicionamiento CSS.
TLDR; Si solo desea el código, desplácese hacia abajo hasta El resultado .
El problema
Hay 2 elementos separados, hermanos, y el objetivo es colocar el segundo elemento (con un id de infoi ) para que aparezca dentro del elemento anterior (el que tiene una class de navi ). La estructura HTML no se puede cambiar.
Solución propuesta
Para lograr el resultado deseado, vamos a mover, o posicionar, el segundo elemento, que llamaremos #infoi para que aparezca dentro del primer elemento, al que llamaremos .navi . Específicamente, queremos que #infoi se coloque en la esquina superior derecha de .navi .
Posición CSS Conocimiento Requerido
CSS tiene varias propiedades para posicionar elementos. Por defecto, todos los elementos son position: static . Esto significa que el elemento se posicionará de acuerdo con su orden en la estructura HTML, con pocas excepciones.
Los otros valores de position son relative , absolute y fixed . Al establecer la position un elemento en uno de estos 3 valores, ahora es posible usar una combinación de las siguientes 4 propiedades para posicionar el elemento:
-
top -
right -
bottom -
left
En otras palabras, al establecer position: absolute , podemos agregar top: 100px para posicionar el elemento 100px desde la parte superior de la página. Por el contrario, si establecemos la bottom: 100px el elemento se colocará 100px desde la parte inferior de la página.
Aquí es donde muchos recién llegados a CSS se pierden : position: absolute tiene un marco de referencia. En el ejemplo anterior, el marco de referencia es el elemento del body . position: absolute with top: 100px significa que el elemento está posicionado 100px desde la parte superior del body .
El marco de referencia de la posición, o el contexto de la posición, se puede alterar estableciendo la position de un elemento padre en cualquier valor que no sea la position: static . Es decir, podemos crear un nuevo contexto de posición dando un elemento padre:
-
position: absolute; -
position: relative; -
position: fixed;
Por ejemplo, si a un elemento <div class="parent"> se le asigna position: relative , cualquier elemento secundario usa <div class="parent"> como contexto de su posición. Si a un elemento hijo se le top: 100px la position: absolute y top: 100px , el elemento se colocaría a 100 px desde la parte superior del elemento <div class="parent"> , ya que <div class="parent"> es ahora el contexto de la posición .
El otro factor a tener en cuenta es el orden de la pila , o cómo se apilan los elementos en la dirección z. Lo que hay que saber aquí es que el orden de la pila de elementos se define, por defecto, por el reverso de su orden en la estructura HTML. Considere el siguiente ejemplo:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
En este ejemplo, si los dos elementos <div> estuvieran ubicados en el mismo lugar en la página, el elemento <div>Top</div> cubriría el elemento <div>Bottom</div> . Dado que <div>Top</div> viene después de <div>Bottom</div> en la estructura HTML, tiene un orden de apilamiento más alto.
div {
position: absolute;
width: 50%;
height: 50%;
}
#bottom {
top: 0;
left: 0;
background-color: blue;
}
#top {
top: 25%;
left: 25%;
background-color: red;
}
<div id="bottom">Bottom</div>
<div id="top">Top</div>
El orden de apilamiento se puede cambiar con CSS utilizando el z-index o las propiedades de order .
Podemos ignorar el orden de apilamiento en este problema, ya que la estructura HTML natural de los elementos significa que el elemento que queremos que aparezca en la top encuentra después del otro elemento.
Entonces, volviendo al problema en cuestión, usaremos el contexto de posición para resolver este problema.
La solución
Como se indicó anteriormente, nuestro objetivo es posicionar el elemento #infoi para que aparezca dentro del elemento .navi . Para hacer esto, envolveremos los elementos .navi y #infoi en un nuevo elemento <div class="wrapper"> para que podamos crear un nuevo contexto de posición.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
Luego cree un nuevo contexto de posición asignando a .wrapper una position: relative .
.wrapper {
position: relative;
}
Con este nuevo contexto de posición, podemos colocar #infoi dentro de .wrapper . Primero, #infoi a #infoi una position: absolute , lo que nos permite posicionar #infoi absolutamente en .wrapper .
Luego agregue top: 0 y right: 0 para colocar el elemento #infoi en la esquina superior derecha. Recuerde, como el elemento #infoi está utilizando .wrapper como contexto de su posición, estará en la parte superior derecha del elemento .wrapper .
#infoi {
position: absolute;
top: 0;
right: 0;
}
Debido a que .wrapper es simplemente un contenedor para .navi , posicionar #infoi en la esquina superior derecha de .wrapper da el efecto de estar ubicado en la esquina superior derecha de .navi .
Y ahí lo tenemos, #infoi ahora parece estar en la esquina superior derecha de .navi .
El resultado
El siguiente ejemplo se resume en lo básico y contiene un estilo mínimo.
/*
* position: relative gives a new position context
*/
.wrapper {
position: relative;
}
/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/
.navi {
background-color: #eaeaea;
height: 40px;
}
/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/
#infoi {
position: absolute;
top: 0;
right: 0;
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;
}
<div class="wrapper">
<div class="navi"></div>
<div id="infoi">
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>
</div>
La solución alternativa (sin envoltura)
En el caso de que no podamos editar ningún HTML, lo que significa que no podemos agregar un elemento de envoltura, aún podemos lograr el efecto deseado.
En lugar de usar position: absolute en el elemento #infoi , usaremos position: relative . Esto nos permite reposicionar el elemento #infoi desde su posición predeterminada debajo del elemento .navi . Con position: relative podemos usar un valor top negativo para moverlo hacia arriba desde su posición predeterminada, y un valor left de 100% menos unos pocos píxeles, utilizando left: calc(100% - 52px) , para posicionarlo cerca de la derecha lado.
/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/
.navi {
background-color: #eaeaea;
height: 40px;
width: 100%;
}
/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/
#infoi {
position: relative;
display: inline-block;
top: -40px;
left: calc(100% - 52px);
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;
}
<div class="navi"></div>
<div id="infoi">
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>
No soy muy codificador ni experto en CSS, pero sigo usando tu idea en mis diseños web. He intentado diferentes resoluciones también:
#wrapper {
margin: 0 auto;
width: 901px;
height: 100%;
background-color: #f7f7f7;
background-image: url(images/wrapperback.gif);
color: #000;
}
#header {
float: left;
width: 100.00%;
height: 122px;
background-color: #00314e;
background-image: url(images/header.jpg);
color: #fff;
}
#menu {
float: left;
padding-top: 20px;
margin-left: 495px;
width: 390px;
color: #f1f1f1;
}
<div id="wrapper">
<div id="header">
<div id="menu">
menu will go here
</div>
</div>
</div>
Por supuesto habrá un envoltorio alrededor de ambos. Puede controlar la ubicación del menú div que se mostrará dentro del encabezado div con márgenes izquierdos y posiciones superiores. También puede configurar el menú div para flotar a la derecha si lo desea. Espero que esto ayude.
Usando un div con estilo z-index:1; y position: absolute; Puedes superponer tu div en cualquier otro div .
z-index determina el orden en el que se ''apilan'' los divs. Un div con un z-index más alto aparecerá delante de un div con un z-index más bajo. Tenga en cuenta que esta propiedad solo funciona con elementos posicionados .
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
<div id="container">
<div id="navi">a</div>
<div id="infoi">
<img src="https://appharbor.com/assets/images/-logo.png" height="20" width="32" />b
</div>
</div>
Sugeriría aprender sobre la position: relative elementos position: relative e hijos con position: absolute .