0

ページの 100% を占める「外側」の div があります。z-index 値が高いと、「内側」の div があります。理由はわかりませんが、margin-bottom はこの「内側」の div では機能しないようです。

私のコードは次のとおりです。

<style type="text/css">

#inside{
    background-color:#f8f8f8;
    position: absolute;
    top:0;
    left:20%;
    width:60%;
    margin-top:35px;
    margin-bottom:35px;
    z-index:3;
    border-radius: 7px;
    box-shadow: 6px 6px 20px black; 
}


#outside{
    position: fixed;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity:0.7;
    z-index:2;
    background-attachment:fixed;
}
</style>

<div id="outside"></div>
<div id="inside">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

ここでフィドル：http://jsfiddle.net/malamine_kebe/EnHut/

4

3 に答える 3

1

に変更position: absolute;_position: relative;#inside

http://jsfiddle.net/EnHut/1/

于 2013-06-06T15:53:09.513 に答える
1

簡単な解決策:

位置を相対 http://jsfiddle.net/EnHut/2/に変更します

#inside{
  background-color:#f8f8f8;
  position: relative;
  top:0;
  left:20%;
  height: 700px;
  width:60%;
  margin-top:35px;
  margin-bottom:35px;
  z-index:3;
  border-radius: 7px;
  box-shadow: 6px 6px 20px black; 
}
于 2013-06-06T15:55:01.387 に答える
0

これを試して：

#inside{
    background-color:#f8f8f8;
    position: relative;
    top:0;
    left:20%;
    width:60%;
    margin-top:35px;
    margin-bottom:35px;
    z-index:3;
    border-radius: 7px;
    box-shadow: 6px 6px 20px black; 
}

それはあなたの位置です — あなたは絶対を使用していますが、要素は下部にマージンを与える場所を知りません。

相対と絶対の違いを確認するには、ここをクリックしてください。

そして、これが実際の問題の解決策です。(FiddleJs)

于 2013-06-06T15:57:30.967 に答える