我有3个div彼此嵌套。对于第三个嵌套div,我希望该位置基于父div,而不是祖父母div。我很困惑,因为我认为那总是这样,因为绝对位置是基于父容器的。这是我现在所拥有的:
#expandedView
{
width: 96vw;
height: 20vh;
padding: 4vw;
#descriptionContainer
{
height: 10vh;
width: 100%;
#descriptionIcon
{
position: absolute;
top: 0px;
left: 0px;
width: 1vh;
height: 1vh;
}
}
}
对于HTML:
<div id="expandedView">
<div id="descriptionContainer">
<div id="descriptionIcon">
</div>
</div>
</div>
最佳答案
绝对定位的元素相对于其最接近的祖先(或未定位static
的祖先)进行定位。
因此要相对于#descriptionIcon
定位#descriptionContainer
,请将position: relative;
添加到#descriptionContainer
#expandedView {
width: 96vw;
height: 20vh;
padding: 4vw;
background: blue;
}
#expandedView #descriptionContainer {
height: 10vh;
width: 100%;
position: relative;
background: red;
}
#expandedView #descriptionContainer #descriptionIcon {
position: absolute;
top: 0px;
left: 0px;
width: 1vh;
height: 1vh;
background: yellow;
}
<div id="expandedView">
<div id="descriptionContainer">
<div id="descriptionIcon">
</div>
</div>
</div>
关于css - CSS使用父div的位置进行定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42309415/