CSS的定位问题答案

【问题标题】：Positioning issue with CSSCSS的定位问题
【发布时间】：2011-12-22 08:04:56
【问题描述】：

我有一个可以打开多个窗口的应用程序。内容是由 DOM 用 jQuery 动态创建的，但类是静态的。

问题是底部 div 粘在顶部 div 的底部，而不是底部（见下图）。

这里有什么我明显遗漏的东西吗？

.containerDiv {
    position: absolute;
    left:50px;
    top: 60px;
    margin-left: auto;
    margin-right: auto;
    resize: both;
    overflow: auto;
}

.topDiv {
    position: relative;
    top: 0;
    height: 60px;
    width: 100%;
    overflow: hidden;
}

.middlediv {
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
}

.bottomDiv {
    position: relative;
    bottom: 0;
}

看起来是这样的：

--------------------
      topDiv
--------------------
     bottomDiv
--------------------


     middleDiv


--------------------

【问题讨论】：

你的 html 是什么样的？

标签： jquery css dom html positioning

【解决方案1】：

在 bottom div 的 CSS 中将 position:relative 更改为 position:absolute。这是bottom:0 可以工作的唯一方法。

【讨论】：

【解决方案2】：

我认为您可能错误地理解了绝对和相对的概念。

位置：相对；底部：0；表示从默认值没有变化。将该元素的底部相对于它的位置定位为 0，即完全没有区别。

【讨论】：