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在那儿但在身体之外（接缝的父位是html而不是body。

有帮助吗？

Answer 1

在这里，您对背景的特定行为感到困惑，该行为是从body到画布的背景传播，使您看到的是整个body。

对于其根元素是HTML HTML元素或XHTML的文档 html元素[HTML]：如果背景图片的计算值根元素为none且其背景色为透明，用户代理必须改为传播背景的计算值该元素的第一个HTML BODY或XHTML主体子级的属性元件。 ^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>

现在可以很清楚地看到主体是不可见的，这仅仅是因为其高度为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>

要确保您的身体的宽度等于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>

您可以看到主体的行为完全符合您的要求（以200px宽度为中心），并且通过添加小的填充和边框，我们还可以看到按钮位于右下角。

Answer 2

您需要将某些属性同时应用于body和html，因为没有内容可以将height: 100%应用于。

尝试在您的身体上应用边框以查看其“大”尺寸。如果您没有同时为自己的html设置身高，则会因为缺少内容而看到没有身高。

body, html {
  position: relative;
  width: 200px;
  height: 100%;
  margin: 0 auto;
}

body {
  background: gold;
}

.btn {
  position: absolute;
  right: 10px;
  bottom: 0;
  background: blue;
  color: white;
}

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

Answer 3

您必须增加一个身高，如果体内没有任何元素，则不能100％确定身高

尝试此CSS代码

body{
    position:relative;
    width:200px;
    margin:0 auto;
    background:gold;
    border: 1px solid #111;
    height: 100px; /* this height for example */
}

.btn{
    position:absolute;
    right:10px;
    bottom:0;
    background:blue;
    color:white;
}

Answer 4

请尝试使用以下代码

body {
  position:relative;
  width:200px;
  margin:0 auto;
  background:gold;
}
.btn {
  position:absolute;
  right:10px;
  bottom:0;
  background:blue;
  color:white;
  top: 0;
  height: 25px;
}

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

Answer 5

由于您还没有提到想要的最终结果。我承担了几件事，并据此工作。由于默认情况下所有绝对元素都与主体相关。相对于身体的位置没有任何区别。另外，如果您希望按钮容器的宽度为200px，最好在此处使用div，最大宽度为200.尝试以下代码进行相应的更改。希望对您有帮助！

CSS：

messageSource

标记：

body{
//Removed everything
}

.btn{
position:absolute;
width:60px;height:20px;
top:50%;left:50%;
margin-top:-10px;margin-left:-30px;
background:blue;
color:white;
}
.button_holder{
  position:relative;margin: 50px auto;
  max-width:200px;height:100px;
  background:gold;
}

https://codepen.io/anon/pen/MPvLqE

按钮丢失或在体外

5 个答案: