我有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/

10-10 18:41
查看更多