この絶対的な位置要素の参照者は誰ですか？浮動親または絶対祖父母ですか？

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; 
} 

I readその絶対は、 "要素が最初に配置された（静的ではない）祖先要素に対して配置されている"ことを意味します。

これが私の最後のセレクタ要素（#dropdown_li:hover > ul）はその浮動親li（つまり、浮動この意味での位置付けとしての資格がない）、またはそのも絶対位置の偉大な祖父母（#some_navbar）との相対位置していることを意味するのでしょうか？

Answer 1

フローティングは位置決めとしてカウントされません。 「配置」は、positionプロパティの場合はstatic以外の値を意味します。それはstatic

Answer 2

ないpositionと、最も近い祖先だからだから、#dropdown_li:hover > ulは、私はそれは「問題の要素ではないことを示します。このJSFIDDLE

にあなたのためのコードを解体#some_navbarに対して位置決めされるだろう相対的な "親に浮かれています。その場合、親要素を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; 
}