button is missing or outside of body - html

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>
why body in code snippet is not 200px?
where is btn in code snippet?
On my localhost body IS 200px and btn is there but outside of body (seams as his parent is html and not body.
Any help?

Answer 1

Here you are confused by a specific behavior of the background which is background propagation from body to canvas which make you thing that what you see is the whole 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
If you add a background color to the html element this one will get used and you will no more see the gold
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>
Now it's clear the body is not visible simply because its height is 0 since there is no in-flow element inside it as the button is position absolute. Considering this, bottom:0 is the top of you screen and you button is overflowing from the top.
Let's add some animation to see it:
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>
And to make sure that your body is having a width equal to 200px and a height 0 simply add a border and you will see it. You will also notice the background propagation
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>
As you can see the body behave exactly like you want (centred with 200px width) and by adding a small padding and border we can also see that the button is placed at the bottom right.

Answer 2

You need to apply some of the properties to both your body and html because there is no content to apply your height: 100% to.
Try applying a border on your body to see how 'big' it is. If you do not set a height to you html at the same time, you will see that it has no height because of the lack of content.
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

you must have to add a body height, 100% is not ok without any element in the body
try this CSS code
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

Please try following code
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

Since you havent mentioned what end result you want. I have assumed few things and worked accordingly. Since all the absolute elements are by default related to body. The position relative to the body is not making any difference. Plus if you want a 200px width of the button container, its better to use a div here with max-width:200.Try the code below make changes accordingly. Hope it helps !!
CSS:
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;
}
Markup :
<div class="button_holder">
<button class='btn'>SEND</button>
</div>
https://codepen.io/anon/pen/MPvLqE