All geek questions in one place

BODY tag with root level block

I tried to absolutely place an element at the bottom of the page (and not in the viewport). An element is a direct child BODY. You can imagine that a page contains a lot of content, so there is a scroll bar.

So something like this:

<body>
  <img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>

This places the image at the bottom of the viewport on top of existing content. However, as soon as I added the following css rule:

body{
  position:relative;
}

The image has moved to the bottom of the page.

So, if BODYit is not a containing block of all elements, what is it?

In addition, I am sure that this is a problem, but I could not find an example with a detailed explanation of the problem and solution. Any pointers?

+3
4

<html>?

position: relative , .

- quirksmode

, , , / . / / . ?

position: static: , .

position: relative: , , (.. : ).

position: absolute: , , : static. , <html> . (: <body> .) <--- Bingo

position: fixed: ( ).

+2

Ok , :

<body>
    <img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
    <div style="margin-bottom: 50px">Content here</div>
</body>

. , . , - { }. , .

PS , margin-bottom - , . , , (, 80% , 10% ), padding-bottom: 50px.

0

. , , . : , .

, , body . (: ) - (: ), .

:

( ).

. , css:

body {position: relative; }

.

? , ? ( , ) ?

0

, , , . , : body, html {'css properties bladiebla'}. , html , ;) ( a.t.m.)

0

Source: https://habr.com/ru/post/1769059/

More articles:


All Articles