0

http://jsfiddle.net/cxwQF/12/。

注: 赤と緑のボックスは交差する必要があります。緑色のボックスは画像または動画です。ホバーすると黄色になりました。しかし、赤いボックスが始まる底ではありません。赤いボックスはコントロールです (たとえば、次の画像)。

質問。親 div を画像の後ろに、子 div を一番上に配置するにはどうすればよいですか。

マークアップ:

<div id='image'></div>
<div id='parent'>
    <div id='child'></div>
</div>​

CSS:

#image {
    position: relative;
    width: 100%;
    height: 500px;
    background: green;
    z-index: 2;
}

#image:hover {
    background: yellow;
}

#parent {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

/*#parent:hover {
    background: blue;
} */  

#child {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background: red;
    z-index: 3;
}​
4

2 に答える 2

0

これはどのようにあなたに合っていますか？何を達成しようとしているのかを知らずに、それを構造化する方法を知ることは困難です。

http://jsfiddle.net/cxwQF/21/

divあなたの「子供」には見えない別のものを作成しましたが、元の (足) は同じ場所に残ります。

<div id='image'></div>
<div id='foot'>

</div>
<div id='parent'>
<div id='child'></div>
</div>

境界線のスタイルについては、純粋にテスト目的で申し訳ありません。

于 2012-11-05T12:34:13.207 に答える
0

純粋な CSS ソリューションを見つけました。マークアップはそのままです。

CSS:

#image {
    width: 100%;
    height: 500px;
    background: green;
}

#image:hover {
    background: yellow;
}

#parent {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    visibility: hidden;
}

#child:hover {
    background: pink;
}

#child {
    margin: 0 auto;
    visibility: visible;
    width: 100px;
    height: 100px;
    background: red;
}​

解決策: #parent の「visibility」を「hidden」に設定し、#child の「visibility」を「visible」に設定する必要があります

フィドルはこちら: http://jsfiddle.net/cxwQF/22/

于 2012-11-05T14:01:00.360 に答える