Расположите один элемент относительно другого в CSS

Я хочу расположить четыре divs относительно другого. У меня есть прямоугольник div и я хочу вставить 4 divs по углам. Я знаю, что CSS имеет атрибут "position:relative", но это относительно нормального положения этого элемента. Я хочу расположить мой divs Не относительно их нормального положения, а относительно другого элемента (прямоугольника). Что мне делать?

33
css position relative

2 ответов

Я бы предложил использовать абсолютное позиционирование внутри элемента.

Я создал это, чтобы помочь вам визуализировать его немного.

#parent {
    width:400px;
    height:400px;
    background-color:white;
    border:2px solid blue;
    position:relative;
}
#div1 {position:absolute;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:100px;position:absolute;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:absolute;top:0;right:0;background:yellow;}
#div4 {width:100px;height:100px;position:absolute;top:0;left:0;background:gray;}
<div id="parent">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

</div>

http://jsfiddle.net/wUrdM/

25

position: absolute расположит элемент по координатам относительно ближайший предок, расположенный, т. е. ближайший родитель, который не position: static.

у ваших четырех divs, вложенных в целевой div, дайте целевой div position: relative, и использовать position: absolute на других.

структура вашего HTML похожа на это:

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

и этот CSS должен работать:

#container {
  position: relative;
}

#container > * {
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

...
32