Pregunta Cómo superponer un div sobre otro div


Esperando que alguien pueda ayudar, pero necesito ayuda para superponer a un individuo div sobre otro individuo div.

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 div#infoi o el img, dentro de la primera div.navi.

Tiene que ser dos por separado divs como se muestra, pero necesito saber cómo podría colocar el div#infoi sobre el div.navi y al lado derecho y centrado en la parte superior de la div.navi.

Agradecería cualquier ayuda para lograr esto.


734
2018-05-31 03:15


origen


Respuestas:


#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/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

Sugeriría aprender sobre position: relative y elementos infantiles con position: absolute.


984
2018-05-31 03:20



La solución aceptada funciona muy bien, pero IMO no tiene una explicación de por qué funciona. El siguiente ejemplo se reduce a lo básico 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 de CSS.

TLDR; si solo quiere el código, desplácese hacia abajo para El resultado.

El problema

Hay 2 elementos separados, hermanos, y el objetivo es posicionar el 2º elemento (con un id de infoi) por lo que aparece dentro del elemento anterior (el que tiene una clase 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 por lo que aparece dentro del primer elemento, que llamaremos .navi. Específicamente, queremos #infoi para colocarse en la esquina superior derecha de .navi.

Posición CSS requerida Conocimiento

CSS tiene varias propiedades para elementos de posicionamiento. Por defecto, todos los elementos son position: static. Esto significa que el elemento se colocará según su orden en la estructura HTML, con algunas excepciones.

El otro position los valores son relative, absolutey fixed. Al establecer un elemento position a 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 bottom: 100px el elemento se colocará 100px desde la parte inferior de la página.

Aquí es donde muchos recién llegados de CSS se pierden - position: absolute tiene un marco de referencia En el ejemplo anterior, el marco de referencia es el body elemento. position: absolute con top: 100px significa que el elemento está posicionado 100px desde la cima del body elemento.

El marco de referencia de posición o contexto de posición se puede modificar configurando position de un elemento principal para cualquier valor que no sea 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 <div class="parent"> elemento se da position: relative, cualquier elemento hijo usa el <div class="parent"> como su contexto de posición. Si se le dio un elemento secundario position: absolute y top: 100px, el elemento estaría posicionado 100px desde la parte superior <div class="parent"> elemento, porque el <div class="parent">ahora es el contexto de posición.

El otro factor tener en cuenta es pedido de pila - o cómo los elementos están apilados en la dirección z. El deber-saber aquí es que el orden de la pila de los elementos, por defecto, se define 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 <div> los elementos se colocaron en el mismo lugar en la página, el <div>Top</div> elemento cubriría el <div>Bottom</div> elemento. Ya que <div>Top</div> viene después <div>Bottom</div> en la estructura HTML tiene un orden de apilamiento mayor.

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 usando z-index o order propiedades.

Podemos ignorar el orden de apilamiento en este problema ya que la estructura HTML natural de los elementos significa el elemento en el que queremos que aparezca top viene después del otro elemento.

Por lo tanto, volviendo al problema en cuestión, utilizaremos el contexto de posición para resolver este problema.

La solución

Como se indicó anteriormente, nuestro objetivo es posicionar #infoi elemento por lo que aparece dentro de la .navi elemento. Para hacer esto, envolveremos el .navi y #infoi elementos 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 crea un nuevo contexto de posición dando .wrapper un position: relative.

.wrapper {
  position: relative;
}

Con este nuevo contexto de posición, podemos posicionarnos #infoi dentro .wrapper. Primero, dar #infoi un position: absolute, lo que nos permite posicionarnos #infoi absolutamente en .wrapper.

Luego añade top: 0 y right: 0 para posicionar el #infoi elemento en la esquina superior derecha. Recuerde, porque el #infoi elemento está utilizando .wrapper como su contexto de posición, estará en la parte superior derecha de la .wrapper elemento.

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

Porque .wrapper es simplemente un contenedor para .naviposicionamiento #infoi en la esquina superior derecha de .wrapper da el efecto de estar posicionado 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 reduce a lo básico y contiene un estilo minimalista.

/*
*  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 envoltorio)

En el caso de que no podamos editar ningún HTML, lo que significa que no podemos agregar un elemento contenedor, aún podemos lograr el efecto deseado.

En lugar de usar position: absolute sobre el #infoi elemento, usaremos position: relative. Esto nos permite reposicionar el #infoi elemento de su posición predeterminada debajo de la .navi elemento. Con position: relative podemos usar un negativo top valor para moverlo desde su posición predeterminada, y una left valor de 100% menos algunos píxeles, utilizando left: calc(100% - 52px), para colocarlo cerca del lado derecho.

/* 
*  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>


107
2017-09-20 09:27



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 que divs 'apilan'. Un div con un mayor z-index aparecerá delante de un div con un menor z-index. Tenga en cuenta que esta propiedad solo funciona con elementos posicionados.


98
2018-05-23 13:46



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>


18
2018-01-30 07:45



Aquí sigue una solución simple al 100% basada en CSS. El "secreto" es usar el display: inline-block en el elemento envoltorio. los vertical-align: bottomen la imagen hay un truco para superar el relleno de 4px que algunos navegadores agregan después del elemento.

Consejo: si el elemento antes del wrapper está en línea, pueden terminar anidados. En este caso, puede "envolver el envoltorio" dentro de un contenedor con display: block - por lo general, un buen y viejo div.

.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>


15
2018-01-09 20:52



No soy 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á una envoltura alrededor de ambos. Puede controlar la ubicación del menú div que se mostrará dentro del div del encabezado con los márgenes izquierdos y las posiciones superiores. También puede configurar el menú div para que flote a la derecha si lo desea. Espero que esto ayude.


9
2017-08-28 23:46