Question

这是一个jsfiddle： https://jsfiddle.net/mcgfhL10/

#description{ /*Just a breif description of the product. */
    font-family:"microsoft sans serif";
    font-size:22px;
    position:relative;
    overflow-y:scroll;
    bottom:40px;
    width:400px;
    height:150px;
    background:black;
}

我希望ID为description的div落在ID为shelf的div的底部。但是，它落到了image的底部，这是一个s ??这是怎么回事？

Answer 1

您的描述需要定位于绝对位置，因为它与其他元素无关，但在父容器中是绝对的。您还需要在图像顶部移动描述div。

所以你的HTML变成了：

            <div id="description"><p>foobar</p></div>
            <img id="image" src = "image.jpg">

你的CSS补充是：

#description{
  position: absolute;
}

这是一个小提琴：https://jsfiddle.net/jgghpcmy/1/

Answer 2

您的代码存在的问题是您的描述位于相对位置，而您的父级根本没有定位设置。这意味着描述基本上不知道它存在于架子内，而是计算其相对于图像的位置，图像是最接近的元素。（如果你设置底部：40px到0px的描述，你会发现它会紧贴在图像下面）。

你必须让孩子绝对和父亲相对。如果你定位一个子元素相对，然后将子底部设置为0px，它也不会坚持。你基本上告诉它不要移动到任何地方。（相对意味着相对于当前中心）。

以下是一个参考演示：jsFiddle Demo

.shelf {
    position: relative;
}
.description {
    position: absolute;
}

我强烈建议您在进一步了解之前先阅读CSS定位和显示内容。如果你很了解基础，它会对你有所帮助 CSS Tricks
A List Apart

根据它的父div，不使用Bottom和Top

2 个答案: