使用父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>