Question

我认为我理解了CSS定位的规则，直到我碰到下面的简单代码（也在JSFiddle中）。

#outer {
  /*position: absolute;*/
  box-shadow: inset 0 0 3px red;
}
#inner {
  box-shadow: inset 0 0 3px blue;
  /*position: absolute;
    left: 15px;*/
}

<p id="outer">outer
  <p id="inner">inner</p>
</p>

我没有得到的是：

当您取消注释第一个position: absolute;规则时，为什么outer段落在inner段之上？外部段落没有任何非静态父级，因此应该相对于浏览器窗口放置，对吧？
评论第一条规则。当您取消注释position: absolute; left: 15px;段落的inner时，为什么元素会被按下一点？

Answer 1

外部没有重新定位，或者似乎没有，因为内部（和外部）有一个默认的边距，使其不会上升到顶部，我认为这是你所期望的。

第二个问题也是如此。内部有边距和线高。通过将margin，padding和line-height设置为零来播放，或者使用其他值来查看会发生什么。

顺便说一下，你的HTML无效。 validate :image_present def image_present if image.present? && image_file_size < 2.megabytes errors.add(:file_size, "file size must be between 0 and 2 megabytes.") end end元素不能包含其他元素。

Answer 2

完全披露：W3C HTML Validator认为这不是有效标记，因此使用无效标记时结果可能会有所不同。一个好的重构（假设你希望#inner标签的样式不同，那就是将它包装在标签中并适当地设置样式。

现在回答问题1：我的答案是因为一旦你给了一个position: absolute:规则没有父有position: relative;规则的元素，它将相对于浏览器窗口定位并被删除从文件流程。从那里#inner元素将忽略#outer元素并将其放在文档流中。

问题2：您看到的间距是由于应用于标记的默认边距。请参阅随附的屏幕截图，以获取参考

Answer 3

p标记内不允许使用块级元素。 http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

您的原始html浏览器收到

outer inner 

它注意到它无效并纠正它。浏览器在文本外部后添加结束p标记。这使其具有结束标记。它通过添加开头标记来纠正这一点。

这是浏览器创建的html。浏览器添加的标签以粗体显示

 outer的 
 inner 
的  

因此你没有得到你期望的结果。

Answer 4

首先，元素不应包含另一个元素。 #inner和#outer都是元素，默认情况下为display: block。它们还有一个上下边距。

当您使用#outer设置position: absolute时，如果您检查，您可以看到#outer相对于其第一个定位的祖先元素的位置 - <body>。
如果您将代码更改为：
```
<div id="outer">outer 
 inner
</div>
```
然后将position: absolute和left: 15px应用于#inner它现在相对于其祖先元素 - #outer。

如果您需要在#inner之上移动#outer，则需要将显示值更改为display: inline;两个元素并在{{position: absolute上设置#inner 1}}并删除#outer上的位置值。

请记住：position: absolute =元素将相对定位到第一个定位（非静态）祖先元素。

https://jsfiddle.net/f3sgvcd0/1/

CSS

4 个答案: