hijos - Posiciona un elemento relativo a otro en CSS

selector padre css

Question

Quiero posicionar cuatro div s relativos a otro. Tengo un div rectangular, y quiero insertar 4 div s en sus esquinas. Sé que CSS tiene un atributo "position:relative" , pero esto es relativo a la posición normal de ese elemento. Quiero posicionar mi div s no relativo a su posición normal, sino relativo a otro elemento (el rectángulo). ¿Que debería hacer?

Answer 1

Sugeriría usar el posicionamiento absoluto dentro del elemento.

Creé esto para ayudarte a visualizarlo un poco.

<div id="container">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div>

#container {
  position: relative;
}

#container > * {
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

...

http://jsfiddle.net/wUrdM/

Answer 2

position: absolute posicionará el elemento por coordenadas, con relación al antecesor más cercano posicionado , es decir, el padre más cercano que no está en position: static .

Haga que sus cuatro divs aniden dentro del div de destino, dé la position: relative div position: relative , y use position: absolute en los demás.

Estructura tu HTML similar a esto:

<div id="container"> <div class="top left"></div> <div class="top right"></div> <div class="bottom left"></div> <div class="bottom right"></div> </div>

Y este CSS debería funcionar:

#container { position: relative; } #container > * { position: absolute; } .left { left: 0; } .right { right: 0; } .top { top: 0; } .bottom { bottom: 0; } ...