CSS使用父div的位置进行定位

Question

我有 3 个 div 相互嵌套。对于第三个嵌套 div，我希望位置基于父 div，而不是祖 parent 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>

Answer 1

绝对定位的元素是相对于它最近定位的(或非static定位的)祖先定位的。

因此，要相对于 #descriptionContainer 定位 #descriptionIcon，请将 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>