{"id":745,"date":"2008-06-23T19:10:37","date_gmt":"2008-06-23T19:10:37","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=745"},"modified":"2023-05-12T13:24:13","modified_gmt":"2023-05-12T19:24:13","slug":"positioning-with-css","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=positioning-with-css","title":{"rendered":"Positioning with CSS"},"content":{"rendered":"<p>Note: It is important that you read the CSS box model post before reading this post.<span style=\"\">&nbsp; <\/span><\/span><\/b><\/p>\n<p><b style=\"\"><span>Still wondering why you should use CSS instead of tables?<span style=\"\">&nbsp; <\/span>Please read our forum post entitled, \u201cBenefits of using CSS for Website Layout\u201d before proceeding.<span style=\"\">&nbsp; <\/span><\/span><\/b><\/p>\n<p><span>&nbsp;<\/span><\/p>\n<p><span><br \/>Before CSS, web developers were pretty much stuck using tables for page layout.<span style=\"\">&nbsp; <\/span>With the emergence of CSS, we now have two more important tools: Positioning and floats.<span style=\"\">&nbsp; <\/span><br \/><\/span><br \/><b style=\"\"><span>Positioning<\/span><\/b><\/p>\n<p><span>The position property can be defined in one of four ways:<\/span><\/p>\n<ul style=\"margin-top: 0in;\" type=\"disc\">\n<li class=\"padleft\"><span>Static<\/span><\/li>\n<li class=\"padleft\"><span>Fixed<\/span><\/li>\n<li class=\"padleft\"><span>Absolute<\/span><\/li>\n<li class=\"padleft\"><span>Relative<\/span><\/li>\n<\/ul>\n<p><b style=\"\"><span>Static Positioning<\/span><\/b><\/p>\n<p><i style=\"\"><span>Static<\/span><\/i><span> positioning is the default position for an element.<span style=\"\">&nbsp; <\/span>You really don\u2019t need to use <i style=\"\">static<\/i>, unless overriding a previously set position.<span style=\"\">&nbsp; <\/span>A static positioned element uses this code:<br \/><\/span><\/p>\n<p><span><\/p>\n<div align=left>\n<div>Code:<\/div>\n<pre style=\"margin:0px; padding:6px; border:1px inset; border-bottom:1px solid #E8E8E8; border-right:1px solid #E8E8E8; width:630px; height:34px; overflow:auto;text-align:left;\">\r\n\r\nposition: static;\r\n<\/pre>\n<\/div>\n<p><\/span><\/p>\n<p><b style=\"\"><span>Fixed Positioning<\/span><\/b><\/p>\n<p><span>Elements that are set in the <i style=\"\">fixed<\/i> position are positioned relative to the user viewport.<span style=\"\">&nbsp; <\/span>These elements will always be positioned in relation to the browser window, even when scrolling, which means they\u2019re always visible in the viewport.<span style=\"\">&nbsp; <\/span>This could be extremely helpful and replace lengthy javascript which accomplishes the same task.<span style=\"\">&nbsp; <\/span>Don\u2019t get too excited\u2026Internet Explorer version 5 and 6 do not support <i style=\"\">fixed<\/i> positioning.<span style=\"\">&nbsp; <\/span>It looks like we\u2019re stuck with javascript until <i style=\"\">fixed<\/i> positioning is universally supported.<span style=\"\">&nbsp; <\/span>A <i style=\"\">fixed<\/i> position is displayed like this:<\/span><\/p>\n<div align=left>\n<div>Code:<\/div>\n<pre style=\"margin:0px; padding:6px; border:1px inset; border-bottom:1px solid #E8E8E8; border-right:1px solid #E8E8E8; width:630px; height:34px; overflow:auto;text-align:left;\">\r\n\r\nposition: fixed;\r\n <\/pre>\n<\/div>\n<p><b style=\"\"><span>Absolute Positioning<\/span><\/b><\/p>\n<p><span>Elements positioned with <i style=\"\">absolute<\/i> positioning are taken out of the normal flow and placed <u>exactly<\/u> where you define them to be.<span style=\"\">&nbsp; <\/span>Since they are taken out of the document flow, the rest of the document acts as if an absolute positioned element wasn\u2019t even there.<span style=\"\">&nbsp; <\/span>While it allows for absolute control over the positioning, when using <i style=\"\">absolute<\/i> positioning, be aware that it is easy to accidentally cover up other elements.<span style=\"\">&nbsp; <\/span><i style=\"\">Absolute<\/i> positioning is displayed like this:<\/span><\/p>\n<p><span><\/p>\n<div align=left>\n<div>Code:<\/div>\n<pre style=\"margin:0px; padding:6px; border:1px inset; border-bottom:1px solid #E8E8E8; border-right:1px solid #E8E8E8; width:630px; height:34px; overflow:auto;text-align:left;\">\r\n\r\nposition: absolute;\r\n <\/pre>\n<\/div>\n<p><\/span><\/p>\n<p><b style=\"\"><span>Relative Positioning<\/span><\/b><\/p>\n<p><span>A <i style=\"\">relative <\/i>positioned element is positioned relative to itself.<span style=\"\">&nbsp; <\/span>While that may sound confusing, it\u2019s actually pretty simple.<span style=\"\">&nbsp; <\/span>If you set a <i style=\"\">relative<\/i> position, the box will be moved relative to where it was supposed to be, had you not set a position.<span style=\"\">&nbsp; <\/span>For example, if I were to assign an element with relative positioning the value, &#8216;left: 20px&#8217;, the element will move 20px to the right from where it would have normally been placed.<span style=\"\">&nbsp; <\/span>When using relative positioning, other elements in the document flow treat the relatively positioned element as if it were in its static, or normal position.<span style=\"\">&nbsp; <i>Relative <\/i>positioning is displayed like this:<\/span><\/span><\/p>\n<p><span><span style=\"\"><\/p>\n<div align=left>\n<div>Code:<\/div>\n<pre style=\"margin:0px; padding:6px; border:1px inset; border-bottom:1px solid #E8E8E8; border-right:1px solid #E8E8E8; width:630px; height:34px; overflow:auto;text-align:left;\">position: relative;<\/pre>\n<\/div>\n<p> <\/span><\/span><\/p>\n<ul style=\"margin-top: 0in;\" type=\"disc\">\n<li class=\"padleft\"><span>Quick Side Note: In      the example above, I set the value, &#8216;left: 20px&#8217;, which moved the element      to the right.<span style=\"\">&nbsp; <\/span>Sound confusing?<span style=\"\">&nbsp; <\/span>Here\u2019s why that happens: When assigning      a value such as &#8216;left: 20px&#8217;, I\u2019m actually indicating that 20px should be      placed to the left of the element, essentially moving it right.<\/span><span> <br \/><\/span><\/li>\n<\/ul>\n<p><b style=\"\"><span>Relative + Absolute Positioning<\/span><\/b><\/p>\n<p><span>Relative positioning by itself doesn\u2019t add many advantages over absolute positioning.<span style=\"\">&nbsp; <\/span>However, the true power of relative positioning comes when you combine it with absolute positioning<\/p>\n<p>If an element is relatively positioned, any elements inside of it are positioned relative to it.<span style=\"\">&nbsp; <\/span>Therefore, if we had an absolute positioned element inside of a relative positioned element, the absolute positioned element is relative to the relative positioned element.<span style=\"\">&nbsp; <\/span>Too confusing?<span style=\"\">&nbsp; <\/span>Take a look at the image below:<\/span><\/p>\n<p><span>The relative positioned red box contains the green box which is positioned absolutely as follows: &#8216;top: 50px; left: 50px; <span style=\"\">&#8216;<\/span><\/span><\/p>\n<p><span><!--[if gte vml 1]>                                                  <![endif]--><!--[if !vml]--><img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/images\/forumimages\/relativelyabsolute.jpg\"><br \/><!--[endif]--><\/span><\/p>\n<p><span>As you can see, Div 1 has become the containing block for Div 2, which is now positioned relative to Div 1.<span style=\"\">&nbsp; <\/span>If I were to reposition Div 1, say 100px to the left, Div 2 would move as well, and remain inside of Div 1.<\/span><\/p>\n<p><span>This method becomes even more useful when we want to add columns to our layout.<span style=\"\">&nbsp; <\/span>Here\u2019s a dual column layout using two absolutely positioned boxes inside of a relatively positioned one.<\/span><\/p>\n<p><span><\/span> <img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/images\/forumimages\/relative4.jpg\"><\/p>\n<p><span>See how easy it is to create a two column layout with CSS?<span style=\"\">&nbsp; <\/span>However, what if you want to create a 3, or even 4 column layout?<span style=\"\">&nbsp; <\/span>The easiest way to do that is by using floats.<\/span><\/p>\n<p><b style=\"\"><span>Floats<\/span><\/b><\/p>\n<p><span>Floats turn block elements into inline elements.<span style=\"\">&nbsp; <\/span>They allow two elements to appear side by side, or make an element move to the right or the left inside of another element.<span style=\"\">&nbsp; <\/span>Also, floats are used when you would like text to wrap around an element or an image.<span style=\"\">&nbsp; <\/span>For example, here are two relatively positioned elements without floats.<span style=\"\">&nbsp; <\/span><\/span><\/p>\n<p><span><!--[if gte vml 1]>   <![endif]--><!--[if !vml]--><img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/images\/forumimages\/relative2.jpg\"><br \/><!--[endif]--><\/span><\/p>\n<p><span>You\u2019ll notice how they are stacked vertically.<span style=\"\">&nbsp; <\/span>This is the normal document layout.<span style=\"\">&nbsp; <\/span>What if I want them to line up horizontally?<span style=\"\">&nbsp; <\/span>I would add a couple floats, like this:<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/images\/forumimages\/floats.jpg\"><span>&nbsp;<\/span>  <\/p>\n<p><span>Here is the code used to create these floating boxes:<\/span><\/p>\n<p><span><\/p>\n<div align=left>\n<div>Code:<\/div>\n<pre style=\"margin:0px; padding:6px; border:1px inset; border-bottom:1px solid #E8E8E8; border-right:1px solid #E8E8E8; width:630px; height:498px; overflow:auto;text-align:left;\">&lt;html&gt; \r\n\r\n&lt;head&gt; \r\n&lt;style type=&quot;text\/css&quot;&gt; \r\ndiv.div1 \r\n{ \r\nbackground-color: red;\r\n     position: relative;\r\n     width: 150px;\r\n     top: 10px;\r\n     left: 50px;\r\n     height: 150px;\r\n     padding: 5px;\r\n     border: 1px solid black;\r\n     font-weight:bold;\r\n     float: left; \r\n} \r\ndiv.div2 \r\n{ \r\nbackground-color: green;\r\n     position: relative;\r\n     width: 100px;\r\n     top: 20px;\r\n     left: 75px;\r\n     height: 100px;\r\n     padding: 5px;\r\n     border: 1px solid black;\r\n     font-weight: bold;\r\n     float: left; \r\n} \r\n&lt;\/style&gt; \r\n&lt;\/head&gt; \r\n&lt;body&gt; \r\n&lt;div class=&quot;div1&quot;&gt; \r\nRelatively positioned&lt;br&gt; \r\n\r\ntop: 10px;&lt;br&gt; \r\nleft: 50px;&lt;br&gt; \r\nfloat: left; \r\n&lt;\/div&gt; \r\n&lt;div class=&quot;div2&quot;&gt; \r\nRelatively positioned&lt;br&gt; \r\ntop: 20px;&lt;br&gt; \r\n\r\nleft: 75px;&lt;br&gt; \r\nfloat: left; \r\n&lt;\/div&gt; \r\n&lt;\/body&gt; \r\n&lt;\/html&gt;\r\n<\/pre>\n<\/div>\n<p><\/span><\/p>\n<p><span>You\u2019ll notice that simply by adding a float to each element, they now line up horizontally.<span style=\"\">&nbsp; <\/span>If I wanted, I could even add another element to the right.<span style=\"\">&nbsp; <\/span>Keep in mind that I have turned these block level elements into inline elements with floats.<span style=\"\">&nbsp; <\/span>If I wanted to start a new row of floats underneath the first, I would have to clear the floats, by adding this code to the first element in the second line:<\/span><\/p>\n<div align=left>\n<div>Code:<\/div>\n<pre style=\"margin:0px; padding:6px; border:1px inset; border-bottom:1px solid #E8E8E8; border-right:1px solid #E8E8E8; width:630px; height:34px; overflow:auto;text-align:left;\">\r\n\r\nClear: both;\r\n <\/pre>\n<\/div>\n<p><span>There is one more tool that will come in handy when positioning with CSS: Z-index.<span style=\"\">&nbsp; <\/span>The z-index adds another dimension to a normally two dimensional page.<span style=\"\">&nbsp; <\/span>An element with a higher <code><span style=\"font-family: &quot;Arial Narrow&quot;;\">z-index<\/span><\/code> appears in front of an element with a lower <code><span style=\"font-family: &quot;Arial Narrow&quot;;\">z-index.<span style=\"\">&nbsp; <\/span>For example, if I wanted an element to be displayed in front all the time, I would set a z-index of 99.<span style=\"\">&nbsp; <\/span>Z-index can be set like this:<\/span><\/code><\/span><\/p>\n<div align=left>\n<div>Code:<\/div>\n<pre style=\"margin:0px; padding:6px; border:1px inset; border-bottom:1px solid #E8E8E8; border-right:1px solid #E8E8E8; width:630px; height:34px; overflow:auto;text-align:left;\">\r\n\r\nz-index: 1;\r\n <\/pre>\n<\/div>\n<p><span>These are the layout tools that come with CSS.<span style=\"\">&nbsp; <\/span>The more you use them, the easier layout will become, and the more options you will have when designing a page.<span style=\"\">&nbsp; <\/span>Keep in mind that not every browser handles CSS the same way, so please read the Cross-browser CSS post in the forum.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: It is important that you read the CSS box model post before reading this post.&nbsp; Still wondering why you should use CSS instead of tables?&nbsp; Please read our forum post entitled, \u201cBenefits of using CSS for Website Layout\u201d before proceeding.&nbsp; &nbsp; Before CSS, web developers were pretty much stuck&#8230;<\/p>\n","protected":false},"author":2,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[],"ht-kb-tag":[],"class_list":["post-745","ht_kb","type-ht_kb","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=745"}],"version-history":[{"count":21,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/745\/revisions"}],"predecessor-version":[{"id":832,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/745\/revisions\/832"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=745"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=745"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}