Question

我有一个“外部”div占用了100％的页面。有了更高的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/

Answer 1

将position: absolute;

更改为position: relative;至#inside

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

Answer 2

简单的解决方案：

将位置更改为相对位置 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; 
}

Answer 3

试试这个：

#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; 
}

这是你的位置 - 你使用的是绝对的，元素不知道在底部给出边距的位置。

要查看相对与绝对之间的差异，just click here。

And here is the resolution of the problem in practice. (FiddleJs)

保证金底部不想工作

3 个答案: