{"id":1114,"date":"2018-12-13T00:33:19","date_gmt":"2018-12-13T00:33:19","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=1114"},"modified":"2018-11-26T07:41:14","modified_gmt":"2018-11-26T07:41:14","slug":"how-to-understand-css-position-absolute-once-and-for-all","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2018\/12\/13\/how-to-understand-css-position-absolute-once-and-for-all\/","title":{"rendered":"How to understand CSS Position Absolute once and for\u00a0all"},"content":{"rendered":"
\n

Stop losing your elements on the screen by understanding how an object figures where it is supposed to\u00a0sit<\/h2>\n<\/div>\n
\n
\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n<\/div>\n
\n

Positioning an element absolutely is more about the element’s container position than its own. To be able to position itself, it has to know which parent div it\u2019s going to position itself relative to.<\/p>\n

The code below shows four nested divs.\u00a0.box-1<\/code>to\u00a0.box-3<\/code>are centered by\u00a0display: flex<\/code>\u00a0and\u00a0margin: auto<\/code>\u00a0only.\u00a0.box-4<\/code>\u00a0doesn’t have\u00a0margin<\/code>\u00a0set, and it sits in its default position in the document flow.<\/p>\n

<body>\r\n  <div class=\"box-1\">\r\n    <div class=\"box-2\">\r\n      <div class=\"box-3\">\r\n        <div class=\"box-4\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/body><\/pre>\n
The\u00a0position<\/code>\u00a0property is unset to all elements.<\/p>\n
body {\r\n  display: flex;\r\n}<\/pre>\n
.box-1,\r\n.box-2,\r\n.box-3 {\r\n  display: flex;\r\n  margin: auto;\r\n}<\/pre>\n
\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>
.box-4 default\u00a0position<\/figcaption><\/figure>\n
To be able to position itself, an element has to know two things:<\/p>\n