誰是這個絕對位置元素的參考：浮動父母還是絕對祖父母？

Question

一個「理論」的CSS問題。

我想有某種澄清，什麼是應該在這種情況下發生......

---

這裏是我的HTML summmed後續版本...

<div id="some_navbar"> 
    <ul> 
     <li id="plain_li"><a href="#">HELLO</a></li> 
     <li id="dropdown_li"><a href="#">GOODBYE</a> 
      <ul> 
       <li><a href="#">FOR NOW</a></li> 
       <li><a href="#">FOR GOOD</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

這是我的樣式表

#some_navbar { 
    position: absolute; /* A positioned ancestor does exist. */ 
    top: 0.75em; 
    right: 1.5em; 
} 

#some_navbar li, 
#some_navbar a { 
    display: block; 
} 

#some_navbar ul { 
    list-style-type: none; 
} 

#some_navbar > ul { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    overflow: hidden; 
} 

#some_navbar > ul > li { 
    float: right; 
    margin: 0; 
    padding: 0.75em 1.5em; 
    border: 1px solid grey; 
    } 

#dropdown_li > ul { 
    display: none; 
} 

#dropdown_li:hover > ul { 
    display: block; 
    position: absolute; 
    top: 1em; 
} 

我read絕對表示「該元素相對於其第一個定位的（不是靜態的）祖先元素」定位。

那麼，這是否意味着我的最後選擇元件（#dropdown_li:hover > ul）相對於它的浮動父li定位（換句話說，不浮資格作爲在這個意義上定位）或其也絕對定位的偉大祖父母（#some_navbar）？

Answer 1

浮動不算作定位。 「定位」表示position屬性的值不是static。所以#dropdown_li:hover > ul將相對#some_navbar，因爲它是一個position最接近的祖先不是static

Answer 2

我解構你的代碼，你在這個JSFIDDLE

它會告訴你，有問題的元素不是「定位相對「它的浮動父。爲此，您必須將父元素設置爲position: relative。

#some_navbar { 
    position: absolute; /* A positioned ancestor does exist. */ 
    border: 1px solid red; 
    left: 5em; 
    width: 300px; 
    height: 300px; 
} 

#some_navbar li, 
#some_navbar a { 
    display: block; 
} 

#some_navbar ul { 
    list-style-type: none; 
} 

#some_navbar > ul { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    overflow: hidden; 
} 

#some_navbar > ul > li { 
    float: right; 
    margin: 0; 
    border: 1px solid grey; 
    } 

#dropdown_li > ul { 
    display: none; 
} 

#dropdown_li:hover > ul { 
    display: block; 
    position: absolute; 
    border: 1px solid green; 
    left: 0; 
    bottom: 0; 
}