当父位置是相对的时，'position: absolute; bottom: 0'不起作用

Question

我有一个css代码。

为什么bottom: 0在position: relative;时不起作用？

如果我放弃position: relative;，bottom有效，但float: left和float: right不在width: 930px;。

对不起，我的英语不好

#main {
  position: relative;
  width: 930px;
  padding: 10px;
  margin: 0 auto;
}
#left {
  position: absolute;
  left: 0;
}
#right {
  position: absolute;
  right: 0;
}
#bottom {
  position: absolute;
  bottom: 0;
}

<div id="main">
  <div id="left">
    Left
  </div>
  <div id="right">
    Right
  </div>
  <div id="bottom">
    Bottom
  </div>
</div>

Answer 1

这是因为

当您在main上设置position:relative时，position:absolute将相对于父级。而且您的#maindiv 没有高度，这会导致#bottom不在页面底部。

Answer 2

这不是要走的路，请使用float进行此类布局。

回到你的问题，

bottom:0工作正常，但由于您的主要没有高度，因此您看不到它，

这样做是为了#main，

    #main
    {
        position: relative;
        width: 930px;
        padding:10px;
        margin:0 auto; 
        height:200px;
    }

编辑：

您可以使用，

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}
#left {
    position:absolute;
    left:0;
    top:0;
}
#right {
 position:absolute;
 right:0;
 top:0;
}
#bottom {
    left:0;
    position: absolute;
    bottom:-20px;
}

但我不会推荐这个（我之前说过这个布局不应该由float处理） absolute 不考虑其他元素的position，因此如果#left具有更多高度，此代码将中断。

如果我是你，我会用这个，

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}
#left {
    float:left;
}
#right {
  float:right;
}
#bottom {
    clear:both;
}