为什么top：0在绝对定位的元素相对于body的工作？ [英] Why doesn't top: 0 work on absolutely-positioned elements relative to body?

问题描述

您可以在下面的代码中看到 h1 下推主体和绝对定位块 .absolute 不粘在顶部。但你也可以看到同一个块被粘在其父 .wrapper 的顶部。为什么？

You can see in the code below that the h1 pushes down the body and the absolutely-positioned block .absolute does not stick to the top. But you also can see that the same block is stuck to the top of its parent .wrapper. Why?

我不是问如何做这个伎俩;我知道如何，例如。

I'm not asking how to do that trick; I know how, e.g. padding instead margin to h1, or clearfix to parent and so on.

我只感兴趣一件事：为什么 h1 的保证金推下了身体，但不是推下 .wrapper ？

I'm interested in only one thing: why h1's margin pushes down the body, but is not pushing down .wrapper?

body {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: silver;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: darkblue;
}

.wrapper {
  position: relative;
  overflow:hidden;
  width: 50%;
  height: 200px;
  overflow: hidden;
  background-color: yellow;
}

.wrapper > .absolute {
  background-color: darkcyan;
}

<div class="absolute"></div>
<h1>Some title</h1>

<div class="wrapper">
  <div class="absolute"></div>
  <h1>Some title</h1>
</div>

OK，我会尽量更清楚。如果你点击下面的链接，你可以看到我的JSFiddle。在正文标签中有 background-color：silver 当我看到代码检查器，我看到身体标记开始略有下降，由于h1 margin。但 background-color 从顶部开始。这意味着代码检查器对我说谎，身体从顶部开始。但是为什么一个绝对定位的元素是 body 的直接子元素不是从顶部开始呢？

OK, I'll try to be more clear. If you click on the link below, you can see my JSFiddle. There is background-color: silver in the body tag. When I look in the code inspector, I see that the body tag begins slightly lower due to the h1 margin. But background-color begins at the top. This means that the code inspector is lying to me, and body begins from top. But why, then, does an absolutely-positioned element that's a direct child of body not start at the top?

JSFiddle

推荐答案

如上所述，顶层绝对定位元素的包含块是 body ，因为 body 是相对定位。当 h1 与 body 的折叠，这会导致边距影响 body ，反过来绝对定位的元素。相反，如果 body 没有相对定位，则绝对定位的元素将锚定到初始包含块，并且粘贴到视口不受 body 上的任何有效边距的影响（因为 body 不再是其包含的块）。

As mentioned, the containing block of the top-level absolutely positioned element is body, as body is relatively positioned. When the margin of the h1 collapses with that of body, this causes the margin to affect body, and in turn the absolutely positioned element that it contains. Conversely, if body wasn't relatively positioned, the absolutely positioned element would be anchored to the initial containing block, and stick to the top of the viewport unaffected by any effective margins on body (because body is no longer its containing block).

为什么银色背景超出了 body 元素，这是 ：

As to why the silver background bleeds beyond the body element, that's by design:

3.11.1。画布背景和根元素

根元素的背景成为画布的背景，其背景绘制区域扩展到覆盖整个画布。然而，任何图像的大小和相对于根元素的位置，就好像它们是为该元素单独绘制的。 （换句话说，背景定位区域被确定为针对根元素）。根元素不再次绘制这个背景，即，其背景的使用值是透明的。

The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas. However, any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) The root element does not paint this background again, i.e., the used value of its background is transparent.

3.11.2。画布背景和HTML< body>元素

对于其根元素是HTML HTML 元素或XHTML html 元素：如果根元素上的'background-image'的计算值为'none'，而其'background-color'为'transparent'，则用户代理必须传播计算值该元素的第一个HTML BODY 或XHTML body 子元素的背景属性。 BODY元素的背景属性的使用值是其初始值，并且传播的值被视为在根元素上指定。建议HTML文档的作者为 BODY 元素而不是 HTML 元素指定画布背景。

For documents whose root element is an HTML HTML element or an XHTML html element: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

根元素的默认背景颜色总是 transparent ，因此设置背景在 html 元素上的颜色防止银色背景从 body 元素中渗出（你会看到检查员实际上不在你身边）：

The root element's default background color is always transparent, so setting a background color on the html element prevents the silver background from bleeding out of the body element (and you'll see that the inspector is in fact not lying to you):

html {
  background-color: white;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: silver;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: darkblue;
}

.wrapper {
  position: relative;
  overflow:hidden;
  width: 50%;
  height: 200px;
  overflow: hidden;
  background-color: yellow;
}

.wrapper > .absolute {
  background-color: darkcyan;
}

<div class="absolute"></div>
<h1>Some title</h1>

<div class="wrapper">
  <div class="absolute"></div>
  <h1>Some title</h1>
</div>

这篇关于为什么top：0在绝对定位的元素相对于body的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！