3 
<div id="parent" style="height:250px;width:250px;display:inline">
   <div id="child" style="height:100%;width:100%;z-index:10001"></div>
   <select style="height:100%;width:100%;z-index:10000"><option/></select>
</div>

私の要件は、子divがselect要素の上にあり、それを完全にカバーするように、親div内にselect要素と子div要素を含めることです。後で、イベントに基づいて子divを非表示にし、select要素を表示したいと思います。子div要素とselect要素の両方が、それぞれ独自に親divのサイズ全体を占める必要があります。どうすればこれを達成できますか？

4

3 に答える 3

4

http://jsfiddle.net/dyBjZ/2

#parent {
    position: relative;
    overflow: auto;
}
.child {
    position: absolute;
    height:100%;
    width:100%;
}

<div id="parent">
    <div class="child">
        <select>
            <option>One</option>
            <option>Two</option>
        </select>
    </div>
    <div class="child" id="child">Click me</div>
</div>
于 2013-03-22T20:11:52.047 に答える
2

上記のコメントを参考にして、問題を解決することができました。これが私がしたことです。他の誰かがこのページを検索している場合に備えて、ここに投稿してください。

<div id="parent" style="height:250px;width:250px">
    <div id="child" style="display:block;height:100%;width:100%"></div>
    <div id="selectParent" style="display:none;height:100%;width:100%">
      <select><option/></select>
    <div>
</div>

javascriptイベントに基づいて、子divの表示をブロックからなしに切り替えます。そして、selectParentで表示をなしからブロックに切り替えます。

于 2013-03-22T20:13:47.667 に答える
0

最初の問題は、#parentdivにサイズを指定してdisplay: inline、そのスタイルから削除することです。

次に、両方の要素をdisplay: noneから、およびvvに切り替えることができますが、これを半分に減らすには、この例display: blockに示すように、要素をデフォルトのマークアップレイアウトから外す絶対配置を使用できます。

HTML：

<div id="parent">
   <div id="child"></div>
   <select></select>
</div>

CSS：

#parent {
    height: 250px;
    width: 250px;
    position: relative;
}
#child {
    position: absolute;
    background: #aaa;
    height: 100%;
    width: 100%;
}
select {
    height: 100%;
    width: 100%;
}
#child.hidden {
    display: none;
}
于 2013-03-22T20:21:02.827 に答える