使用父div的位置定位的CSS

Question

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

Answer 1

绝对定位的元素就是它的位置最靠近（或非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>