Position:Static<\/div>\n
The default positioning for all elements is position:static<\/em>, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.<\/p>\n
#div-1 {   
position:static;  }<\/pre>\n\u00a0<\/p>\n
Position:Relative<\/div>\nIf you specify position:relative<\/em>, then you can use top<\/em> or bottom<\/em>, and left<\/em> or right<\/em> to move the element relative to where it would normally occur in the document.<\/p>\n
Let’s move div-1 down 20 pixels, and to the left 40 pixels:<\/p>\n
#div-1 {   
position:relative;
top:20px;
left:-40px;  }  <\/pre>\nNotice the space where div-1 normally would have been if we had not   moved it: now it is an empty space. The next element (div-after) did not   move when we moved div-1. That’s because div-1 still occupies that   original space in the document, even though we have moved it.<\/p>\n
It appears that position:relative<\/em> is not very useful, but it will perform an important task later in this tutorial.<\/p>\n
<\/p>\n
Position:Absolute<\/div>\nWhen you specify position:absolute<\/em>, the element is removed from the document and placed exactly where you tell it to go.<\/p>\n
Let’s move div-1a to the top right of the page:<\/p>\n
#div-1a {   
position:absolute;   
top:0;   
right:0;   
width:200px;  }  <\/pre>\nNotice that this time, since div-1a was removed from the document,   the other elements on the page were positioned differently: div-1b,   div-1c, and div-after moved up since div-1a was no longer there.<\/p>\n
Also notice that div-1a was positioned in the top right corner of the   page. It’s nice to be able to position things directly the page, but   it’s of limited value.<\/p>\n
What I really want is to position div-1a relative<\/em> to div-1. And that’s where relative position comes back into play.<\/p>\n
Footnotes<\/div>\n\nThere is a bug in the Windows IE browser: if you specify a relative   width (like “width:50%”) then the width will be based on the parent   element instead of on the positioning element.<\/li>\n<\/ul>\nPosition:Relative + Position:Absolute<\/div>\nIf we set relative<\/em> positioning on div-1, any elements within   div-1 will be positioned relative to div-1. Then if we set absolute   positioning on div-1a, we can move it to the top right of div-1:<\/p>\n
#div-1 {   
position:relative;  }  


#div-1a {   
position:absolute;   
top:0;   
right:0;   
width:200px;  }  <\/pre>\nTwo Column Absolute<\/div>\nNow we can make a two-column layout using relative and absolute positioning!<\/p>\n
#div-1 {   
position:relative;  }  


#div-1a {   
position:absolute;  
 top:0;   
right:0;   
width:200px;  } 


 #div-1b {   
position:absolute;  
 top:0;   
left:0;   
width:200px;  }  <\/pre>\nOne advantage to using absolute positioning is that we can position   the elements in any order on the page, regardless of the order they   appear in the HTML. So I put div-1b before div-1a.<\/p>\n
But wait – what happened to the other elements? They are being   obscured by the absolutely positioned elements. What can we do about   that?<\/p>\n
\u00a0<\/p>\n
float<\/div>\nFor variable height columns, absolute positioning does not work, so let’s come up with another solution.<\/p>\n
We can “float” an element to push it as far as possible to the right   or to the left, and allow text to wrap around it. This is typically used   for images, but we will use it for more complex layout tasks (because   it’s the only tool we have).<\/p>\n
#div-1a {   
float:left;  
 width:200px;  }  <\/pre>\nfloat columns<\/div>\nIf we float one column to the left, then also float the second column to the left, they will push up against each other.<\/p>\n
#div-1a {  
float:left;   
width:150px;  }  


#div-1b {   
float:left;   
width:150px;  }  <\/pre>\n    <\/p>\n
float columns with clear<\/div>\nThen after the floating elements we can “clear” the floats to push down the rest of the content.<\/p>\n
#div-1a {   
float:left;  
 width:190px;  }  


#div-1b {   
float:left;  
width:190px;  }  


#div-1c {   
clear:both;  }  <\/pre>\n","protected":false},"excerpt":{"rendered":"Position:Static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set. #div-1 { position:static; } \u00a0 Position:Relative If you specify position:relative, then you can use …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[81,84,85,183],"tags":[1627,1646,1349],"class_list":["post-417","post","type-post","status-publish","format-standard","hentry","category-css","category-css-tags","category-css3","category-help","tag-css","tag-help","tag-tutorial"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/pfoK1S-6J","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/comments?post=417"}],"version-history":[{"count":0,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/417\/revisions"}],"wp:attachment":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/media?parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/categories?post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/tags?post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}