html - 按钮丢失或在 body 外部

Question

body{
position:relative;
width:200px;
margin:0 auto;
background:gold;
}

.btn{
position:absolute;
right:10px;
bottom:0;
background:blue;
color:white;
}

<button class='btn'>SEND</button>

为什么代码段中的body不是200px？

代码片段中的btn在哪里？

在我的本地主机上 body 是 200px 并且 btn 在那里但是在 body 之外(接缝因为他的 parent 是 html 而不是 正文.

有什么帮助吗？

Answer 1

在这里，您对背景的特定行为感到困惑，即从 body 到 Canvas 的背景传播，这让您认为您看到的是整个 body。

For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: 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. ^ref

如果您向 html 元素添加背景色，则会使用该元素，您将不会再看到金色

html {
  background: red;
}

body {
  position: relative;
  width: 200px;
  margin: 0 auto;
  background: gold;
}

.btn {
  position: absolute;
  right: 10px;
  bottom: 0;
  background: blue;
  color: white;
}

<button class='btn'>SEND</button>

现在很明显 body 不可见只是因为它的高度为 0，因为它内部没有流入元素，因为按钮是绝对位置。考虑到这一点，bottom:0 是您屏幕的顶部，您的按钮从顶部溢出。

让我们添加一些动画来查看它:

html {
  background: red;
}

body {
  position: relative;
  width: 200px;
  margin: 0 auto;
  background: gold;
}

.btn {
  position: absolute;
  right: 10px;
  bottom: 0;
  background: blue;
  color: white;
  transition:1s;
}
html:hover .btn {
  bottom:-50px;
}

<button class='btn'>SEND</button>

并确保您的 body 的宽度等于 200px 并且高度为 0，只需添加一个边框，您就会看到它。您还会注意到背景传播

body {
  position: relative;
  width: 200px;
  margin: 0 auto;
  background: gold;
  border:5px solid;
  padding:1px;
}

.btn {
  position: absolute;
  right: 10px;
  bottom: 0;
  background: blue;
  color: white;
  transition:1s;
}
body:hover .btn {
  bottom:-50px;
}

<button class='btn'>SEND</button>

如您所见，正文的行为完全符合您的要求(居中，宽度为 200 像素)，通过添加小填充和边框，我们还可以看到按钮位于右下角。