Css 页边距底部不小于'；我不想工作

我有一个“外部”div，它占据了页面的100%。z指数越高，我就有一个“内部”div。我不知道为什么，但保证金底部似乎不适用于这个“内部”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>

#里面{
背景色：#F8；
位置：绝对位置；
排名：0；
左：20%；
宽度：60%；
利润上限：35px；
边缘底部：35px；
z指数：3；
边界半径：7px；
盒影：6px 6px 20px黑色；
}
#外面{
位置：固定；
左：0；
排名：0；
身高：100%；
宽度：100%；
背景色：黑色；
不透明度：0.7；
z指数：2；
背景附件：固定；
}

---

这里有一把小提琴：

改变

位置：绝对至<代码>位置：相对用于
#内部

简单解决方案：

将位置更改为相对位置

试试这个：

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

这是您的位置-您使用的是绝对值，而元素不知道它在哪里才能在底部提供余量

要查看相对和绝对之间的差异


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