CSS：高さが可変で子要素を絶対要素の先頭に置くようにしますか？

Question

ウェブサイトには、ウェブサイトの下部に「ドロップダウン」メニューがあります。

は、以下のフィドルを見てください：メニューは、私はサブメニューが ul.page-switcherの上部に正確に終了させたい推移している

body { 
 
    background-color: #ccc; 
 
} 
 
ul { 
 
    list-style-type:none; 
 
    width:200px; 
 
} 
 
.spacer { 
 
    height:150px; 
 
    width:auto; 
 
} 
 
ul,li { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
a { 
 
    color:#fff; 
 
    width:200px; 
 
    background-color:#e4003d; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 10px; 
 
} 
 

 
ul li ul { 
 
    z-index: 8888; 
 
    position: absolute; 
 
    background-color: #fff; 
 
    display: none; 
 
} 
 

 
ul:hover li ul, ul:focus li ul { 
 
    display:block; 
 
} 
 

 
ul li ul li { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 
ul li ul li a { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 

 
ul li ul li a:hover, ul li ul li a:focus { 
 
    background-color: #e4003d; 
 
    color: #fff !important; 
 
} 
 

 
ul li ul { 
 
    margin-top: -100px; 
 
}

<div class="spacer"></div> 
 
<ul class="page-switcher"> 
 
    <li> 
 
    <a href="#">Sitamet</a> 
 
    <ul> 
 
     <li><a href="http://#">Lorem</a></li> 
 
     <li><a href="http://#">Ipsum</a></li> 
 
     <li><a href="http://#">Dolor</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div class="spacer"></div>

。メニュー内の項目数やその高さに関する情報はありません。

この例では、私はmargin-top:-100px;を使用しましたが、これはピクセル数が固定されていないため、デモンストレーション用です。

CSSのみの解決策が必要であり、絶対的な位置を保持する必要があります。これをどうやって解決しますか？

Answer 1

がul.page-switcherposition: relativeを作成し、隠されたul位置を与える親の高さですこれにより

それはページ-スイッチャーまたはポップアップアイテムの量/高さの高さが問題ではありません。この動作なぜ

絶対配置ulのbottom: 100%は、その最初の祖先は、この場合page-switcherあるstatic以外の位置を有することに相対的であるという事実に基づいています。

更新/追加されたCSSは、のいずれかの具体的な値を伴わないよう

ul.page-switcher { 
    position: relative; 
} 

ul li ul { 
    bottom: 100%; 
} 

スタックが

body { 
 
    background-color: #ccc; 
 
} 
 
ul { 
 
    list-style-type:none; 
 
    width:200px; 
 
} 
 
.spacer { 
 
    height:150px; 
 
    width:auto; 
 
} 
 
ul,li { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
a { 
 
    color:#fff; 
 
    width:200px; 
 
    background-color:#e4003d; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 10px; 
 
} 
 

 
ul li ul { 
 
    z-index: 8888; 
 
    position: absolute; 
 
    background-color: #fff; 
 
    display: none; 
 
} 
 

 
ul:hover li ul, ul:focus li ul { 
 
    display:block; 
 
} 
 

 
ul li ul li { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 
ul li ul li a { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 

 
ul li ul li a:hover, ul li ul li a:focus { 
 
    background-color: #e4003d; 
 
    color: #fff !important; 
 
} 
 

 
ul.page-switcher { 
 
    position: relative; 
 
} 
 

 
ul li ul { 
 
    bottom: 100%; 
 
}

<div class="spacer"></div> 
 
<ul class="page-switcher"> 
 
    <li> 
 
    <a href="#">Sitamet</a> 
 
    <ul> 
 
     <li><a href="http://#">Lorem</a></li> 
 
     <li><a href="http://#">Ipsum</a></li> 
 
     <li><a href="http://#">Dolor</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div class="spacer"></div>

Answer 2

最初にli要素にmin-heightとposition relativeを入れなければなりません。

あなたがposition absoluteを設定する必要がsubmenueとbottom 0

Answer 3

使用position: relative;bottom: 56px;56pxはul

body { 
 
    background-color: #ccc; 
 
} 
 
ul { 
 
    list-style-type:none; 
 
    width:200px; 
 
} 
 
.spacer { 
 
    height:100px; 
 
    width:auto; 
 
} 
 
ul,li { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
a { 
 
    color:#fff; 
 
    width:200px; 
 
    background-color:#e4003d; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 10px; 
 
} 
 

 
ul li ul { 
 
    z-index: 8888; 
 
    background-color: #fff; 
 
    display: none; 
 
    position: relative; 
 
    bottom: 56px; 
 
} 
 

 
ul:hover li ul, ul:focus li ul { 
 
    display:block; 
 
} 
 

 
ul li ul li { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 
ul li ul li a { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 

 
ul li ul li a:hover, ul li ul li a:focus { 
 
    background-color: #e4003d; 
 
    color: #fff !important; 
 
} 
 

 
ul li ul { 
 
    margin-top: -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="spacer"></div> 
 
<ul class="page-switcher"> 
 
    <li> 
 
    <a href="#">Sitamet</a> 
 
    <ul> 
 
     <li><a href="http://#">Lorem</a></li> 
 
     <li><a href="http://#">Ipsum</a></li> 
 
     <li><a href="http://#">Dolor</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div class="spacer"></div>