CSS с использованием положения родительского div для позиционирования

Question

У меня есть 3 divs, вложенные друг в друга. Для третьего вложенного 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>