Я хочу поместить четыре div
относительно другого. У меня есть прямоугольник div
, и я хочу вставить 4 div
в его углы. Я знаю, что CSS имеет атрибут "position:relative"
, но это относительно нормального положения этого элемента. Я хочу поместить my div
не относительно их нормального положения, а относительно другого элемента (прямоугольника). Что мне делать?
Поместите один элемент относительно другого в CSS
Ответ 1
Я бы предложил использовать абсолютное позиционирование внутри элемента.
Я создал это, чтобы помочь вам немного его визуализировать.
#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>
Ответ 2
position: absolute
будет располагать элемент по координатам относительно ближайшего расположенного предка, то есть ближайшего родителя, который не является position: static
.
У вас есть четыре div вложенных внутри целевого 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;
}
...