css - '位置：绝对；底部：当父位置是相对位置时，0' 不起作用

Question

我有一个CSS代码。

为什么bottom: 0不工作的时候position: relative;？

如果我放弃了，position: relative;作品bottom却又不在。float: leftfloat: rightwidth: 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

那是因为当你设置position:relative在 main 上时，那么position:absolute将是相对于父级的。并且您的#maindiv 没有高度，这导致 div#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;
}