{"id":2389,"date":"2013-07-09T03:36:45","date_gmt":"2013-07-09T07:36:45","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=2389"},"modified":"2013-08-22T03:10:29","modified_gmt":"2013-08-22T07:10:29","slug":"css-tutorial-for-intermediates-positioning-and-its-types","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/css-tutorial-for-intermediates-positioning-and-its-types\/","title":{"rendered":"CSS TUTORIAL FOR INTERMEDIATES:  POSITIONING AND ITS TYPES."},"content":{"rendered":"<p>Positioning HTML elements may be the toughest but most rewarding things you can master. There are four types to interpret the size styles:<\/p>\n<ul>\n<li>Position: static position is the default behavior if you do not set it &#8211; the element just appears where it is in the flow of the HTML<\/li>\n<li>Position: relative position allows you to set the position relative to the position it would have been in using static<\/li>\n<li>Position: absolute position allows you to set the position relative to its parent element (e.g. an image within a DIV)<\/li>\n<li>Position: fixed position allows you to set the position on the page ignoring any other elements<\/li>\n<\/ul>\n<p><b>1) Static positioning in CSS:<\/b><\/p>\n<p>This is the default if you do not specify the positioning for an element in the stylesheet.<\/p>\n<p>If you have four paragraphs one after the other you most likely want them to appear one after the other on the page! The same applies to any other block element.<\/p>\n<p>These blocks are positioned in the default way (position: static position):<a name=\"imageclose-2390\"><div class=\"lb-album\"><a href=\"#image-2390\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/static.jpg\" alt=\"static\" class=\"aligncenter size-full wp-image-2386\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2390\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2390\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/static.jpg\" alt=\"image-2390\">\r\n                   <\/div><\/a><\/p>\n<p>Below is the code in a stylesheet (embedded or external):<a name=\"imageclose-2391\"><div class=\"lb-album\"><a href=\"#image-2391\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/staticcode.jpg\" alt=\"staticcode\" class=\"aligncenter size-full wp-image-2387\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2391\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2391\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/staticcode.jpg\" alt=\"image-2391\">\r\n                   <\/div><\/a><\/p>\n<p><b>2) Relative positioning in CSS:<\/b><\/p>\n<p>Below are the same two DIVs one after the other as in above type. The first one is still\u00a0position: static position. Its position defaults to after this paragraph<a name=\"imageclose-2392\"><div class=\"lb-album\"><a href=\"#image-2392\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/relative.png\" alt=\"relative\" class=\"aligncenter size-full wp-image-2391\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2392\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2392\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/relative.png\" alt=\"image-2392\">\r\n                   <\/div><\/a><\/p>\n<p>The second DIV is relative position.<\/p>\n<p>Below is the code in a stylesheet (embedded or external):<a name=\"imageclose-2393\"><div class=\"lb-album\"><a href=\"#image-2393\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/relativecode1.png\" alt=\"relativecode1\" class=\"aligncenter size-full wp-image-2392\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2393\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2393\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/relativecode1.png\" alt=\"image-2393\">\r\n                   <\/div><\/a><\/p>\n<p>The major changes are the first few lines. This seems easy so far but changes the first element to a relative position as well and it all starts to get complex:<a name=\"imageclose-2394\"><div class=\"lb-album\"><a href=\"#image-2394\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/relativecode2.png\" alt=\"relativecode2\" class=\"aligncenter size-full wp-image-2393\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2394\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2394\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/relativecode2.png\" alt=\"image-2394\">\r\n                   <\/div><\/a><\/p>\n<p><b>3) Absolute positioning in CSS:<\/b><\/p>\n<p>In several ways this is easier than relative positioning. Absolute positioning places the element in position based on the position of its parent. This will not work if the parent is position: static position (so set it to relative or absolute).<a name=\"imageclose-2395\"><div class=\"lb-album\"><a href=\"#image-2395\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/Absolute.png\" alt=\"Absolute\" class=\"aligncenter size-full wp-image-2395\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2395\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2395\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/Absolute.png\" alt=\"image-2395\">\r\n                   <\/div><\/a><\/p>\n<p>Below is the code in a stylesheet (embedded or external):<a name=\"imageclose-2396\"><div class=\"lb-album\"><a href=\"#image-2396\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/Absolutecode.jpg\" alt=\"Absolutecode\" class=\"aligncenter size-full wp-image-2394\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2396\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2396\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/Absolutecode.jpg\" alt=\"image-2396\">\r\n                   <\/div><\/a><\/p>\n<p><b>4) Fixed positioning in CSS:<\/b><\/p>\n<p>Placing things in a fixed position on the page might sound perfect but it can cause problems. How do you let for all the different resolutions and browsers?<\/p>\n<p>It is quite easy though. It\u2019s just the same as absolute positioning but it ignores which element is inside which. Fixed positioned elements are positioned on the particular page rather than in another element.<\/p>\n<p>Below is the code in a stylesheet (embedded or external):<a name=\"imageclose-2397\"><div class=\"lb-album\"><a href=\"#image-2397\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/fixed.jpg\" alt=\"fixed\" class=\"aligncenter size-full wp-image-2390\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2397\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2397\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/07\/fixed.jpg\" alt=\"image-2397\">\r\n                   <\/div><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Positioning HTML elements may be the toughest but most rewarding things you can master. There are four types to interpret the size styles: Position: static position is the default behavior if you do not set it &#8211; the element just appears where it is in the flow of the HTML Position: relative position allows you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[161],"tags":[135,63,146,9],"class_list":["post-2389","post","type-post","status-publish","format-standard","hentry","category-css-design-tutorials","tag-css-background-positioning","tag-html5","tag-html5-with-css","tag-web-designing"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=2389"}],"version-history":[{"count":2,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2389\/revisions"}],"predecessor-version":[{"id":2397,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2389\/revisions\/2397"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=2389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=2389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=2389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}