Beginner typesetters often have difficulty positioning elements through CSS . In fact, the CSS Position property is much easier to learn than it seems at first glance. Having mastered it, you will get a powerful tool with which you can arrange all the elements of the page in the right places. But in order to achieve a result, you need to know about all the existing values, since the principles of their action are very different
The specifics of building a document flow
Position CSS -. ? , html-. header footer, . , - footer html «», «» «». . , , , , . « ».
Position CSS. - float, . «» , -. – .
CSS Position: static
Position: static, , html, . . - , , static. . right/left top/bottom, .
CSS Position: fixed
. , , . , Position: fixed , , .
, . Position: fixed , . , , . , .
CSS Position: relative
. Position: relative, . , , , right/left top/bottom. . , , – , .
. , . . .
. Position absolute . ( ) «» «» Position: absolute . , , Position: fixed, .
-, – top/right/bottom/left. , bottom: 100px, «» 100 . -, «» , , .
. Position: fixed, relative absolute.
. div relative-div, div absolute-div. Position: absolute. «» - , . relative-div Position: relative « » . . , .
? Position: absolute. , «» - static, . , , . , .
Position CSS
, . Position, . CSS Position: absolute . , div absolute-div, «» relative-div. «» . «» 400 px, .
, – top: 50 % left: 50 %. ! Absolute-div , . «» , , «». margin-left margin-right -200 px. . , !
, , «» «». , Position: fixed , . z-index, , . , , . , .
– Position CSS, - . calc() – . , «» . , .