{"id":13611,"date":"2011-12-28T07:38:46","date_gmt":"2011-12-28T12:38:46","guid":{"rendered":"http:\/\/info.template-help.com\/?p=13611"},"modified":"2016-11-11T04:01:45","modified_gmt":"2016-11-11T09:01:45","slug":"css-positioning-elements","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/css-positioning-elements.html","title":{"rendered":"CSS. Positioning elements"},"content":{"rendered":"

This tutorial will help you learn CSS position properly. <\/p>\r\n

Position property is usually used to put the element to the required place on the screen. Let’s see what options we have. <\/p>\r\n\r\n

Static<\/h4>\r\n\r\n

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.<\/p>\r\n

Static positioned elements are not affected by the top, bottom, left, and right properties.<\/p>\r\n

There is no need to specify static position in the CSS file unless you need to reset other position value that has been set before. <\/p>\r\n\r\n

\r\n\tdiv.a{\r\n    \tposition:static;\r\n        }\r\n<\/pre>\r\n\r\n
Relative<\/h4>\r\n\r\n
A relative positioned element is positioned relative to its normal position. You can affect the position of the element using the “top” and “left” properties. <\/p>\r\n\r\n
\r\n\tdiv.b{\r\n    \tposition:relative;\r\n        top:20px;\r\n        left:20px;\r\n        }\r\n<\/pre>\r\n\r\n\"\"<\/a>\r\n\r\n
The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.<\/p>\r\n\r\n
Relatively positioned elements are usually used as parent blocks for the absolutely positioned ones.<\/p>\r\n\r\n\r\n
Absolute<\/h4>\r\n\r\n
An absolute position element is positioned relative to the first parent element that has a position other   than static. If no such element is found, the containing block is <html><\/p>\r\n\r\n
\r\n\tdiv.c{\r\n    \tposition: absolute;\r\n        top:20px;\r\n        left:20px;\r\n        }\r\n<\/pre>\r\n\r\n
The following image displays the behavior of the div with the “c” class and absolute position in case it is placed within the div with class “b” and relative position<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n
\r\n\t<div class="b">\r\n\t\t<div class="c"><\/div>\r\n\t<\/div>\r\n<\/pre>\r\n\r\n
Below you can see the case when the absolutely positioned element doesn’t have any relatively positioned one. <\/p>\r\n\r\n\"\"<\/a>\r\n\r\n
Fixed<\/h4>\r\n\r\n
An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled<\/p>\r\n\r\n
\r\n\tdiv.c{\r\n    \tposition: fixed;\r\n        top:20px;\r\n        left:20px;\r\n        }\r\n<\/pre>\r\n\r\n
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.<\/p>\r\n\r\n
You can learn more about the elements positioning from the following article<\/a><\/p> \r\n
Don’t forget to review our Bootstrap Admin Themes<\/a> based and find out more about CSS functionality.<\/p>","protected":false},"excerpt":{"rendered":"
This tutorial will help you learn CSS position properly.<\/p>\n","protected":false},"author":2,"featured_media":13615,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[256,253],"tags":[1125,514,1127,667,1126,693],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/13611"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=13611"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/13611\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/13615"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=13611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=13611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=13611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}