html - CSS ホバー マージンの後ろ

Question

ページの中央にコンテンツ領域があり、それを中心にしてmargin: 0 auto; います。ページに背景効果をいくつかの小さな立方体で持たせたいと考えています。ホバーすると、いくつかの効果で変化します。

ホバー効果はコンテンツ領域の下または上で正常に機能しますが、問題は、コンテンツを中央に配置するマージンがホバリングの認識を妨げているように見えることです。動作しません。

助けてくれてありがとう！

編集: コード例: http://cssdeck.com/labs/dl3ojm0g

Answer 1

コンテンツ コンテナを絶対位置に配置します。次に、左: 50% およびマージン左: -700px/2

#content {
position: absolute;
top: 50px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray; }

Answer 2

CSS に若干の変更を加えると、うまく機能します。

    #content {
        margin: 0 auto;
        position:relative;
        margin-top: 50px;
        width: 700px;
        height: 300px;
        padding: 20px;
        background-color: white;
        border: 2px solid darkgray;
        color: darkgray;
        z-index:2;
    }
    #cubeHolder {
        position: absolute;
        top: 0;
        left: 0;
        z-index:1;
}

相対的に配置する必要が#contentあり、比較してより高い z-index を与えました#cubeHolder

例： http: //jsfiddle.net/nwrFa/6/