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

这是你的位置——你使用的是绝对的，并且元素不知道它在哪里给底部的边距。

要查看相对和绝对之间的区别，只需单击此处。

这是实践中问题的解决方案。（提琴手）

于 2013-06-06T15:57:30.967 回答