Understanding the position property and where to use it depends on a basic understanding of the HTML document flow and is essential to creating custom page layouts. Typically browsers draw (render) HTML elements on a page from left to right and top to bottom. By default most HTML elements can be either "block-level" or "inline". Block-level elements (e.g. <p></p>, <h1></h1> ) have an implied newline after their closing tags, inline elements (e.g, <img>, <a></a>) do not. So two paragraphs (which are block-level elements) will be stacked on top of each other in a normal document flow, but a link (which is and inline element) in a paragraph will will continue the line flowing from left to right without a new line after the closing <a> tag.
You can read more about document flow here:
- http://onwebdev.blogspot.com/2011/01/css-understanding-document-flow.html
- https://www.codecademy.com/en/forum_questions/4fb56b2c9bcf1e00030635b2
- https://webdesign.tutsplus.com/articles/quick-tip-utilizing-normal-document-flow--webdesign-8199
In CSS the position property specifies the positioning method which can be either static, relative, fixed or absolute.
position: static is the default and positions elements with the normal document flow. Using any of the other positioning methods allows you to use the top, bottom, left, and right CSS properties to effect the normal document flow. You might use position static to keep you top navigation visible at all times.
position: relative allows you to change an elements position relative to what it would be in the normal document flow. For example, a "p" element with the following CSS:
page{ position: relative ; left: 30px ;}
would be indented from the left side of the screen by 30 pixels. Note that other content will not be adjusted to fill in any gap created by this new element position.
position: fixed is positioned relative to the browser viewport. This means it always stays in the same place even if the page is scrolled. For example, a "div" element with the following css:
div { position: fixed ; top: 0 ; }
would remain at the top of the browser viewport as you scrolled down the page.
position: absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static.
It's important to note that when elements are positioned, they can overlap other elements. This is what the z-index property is for. It specifies the back to front order of overlapping elements (elements with a higher z-index are positioned at the top). Z-index can be either negative or positive.
So that briefly covers "position" now what about the display property. You'll remember that earlier I said that HTML elements can be either block or inline -- well the display property let's us change that default value. With the advent of HTML 5 there are a lot more values for display (you can find them all at: http://www.w3schools.com/cssref/pr_class_display.asp) but let's talk about a few that you're most likely to use.
display: none does just what you think it would from the name - it means that the element doesn't display at all (and it takes it out of the document flow so that it takes no space on the page.) Why would you want to do this? Well think about when you have a menu that sub-menu items that are revealed when you rollover (or click) on them. This is often accomplished by setting an element to display: none when the page is loaded and the changing it to display: block when it is clicked or when the mouse is "hovering" over it.
As I said earlier display: block and display: inline are the default states for most HTML elements but sometimes it's useful to change the defaults. Imagine that you have a list that you'd like to server as a horizontal navigation. Your HTML might look something like this:
<ul class="primary-nav">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
ul and li are block elements so in the normal document flow the items would display stacked from top to bottom with each item on a seperate line. However, if we add the following CSS rule we can get the list to display horizontally:
.primary-nav li { display: inline ; }
The newest value (in CSS3) is display: flex. This is not a final standard yet but is close enough that it is being used to handle layouts that were difficult to achieve in earlier versions of CSS. You can learn more about flex layouts at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can read more about document flow here:
- http://onwebdev.blogspot.com/2011/01/css-understanding-document-flow.html
- https://www.codecademy.com/en/forum_questions/4fb56b2c9bcf1e00030635b2
- https://webdesign.tutsplus.com/articles/quick-tip-utilizing-normal-document-flow--webdesign-8199
In CSS the position property specifies the positioning method which can be either static, relative, fixed or absolute.
position: static is the default and positions elements with the normal document flow. Using any of the other positioning methods allows you to use the top, bottom, left, and right CSS properties to effect the normal document flow. You might use position static to keep you top navigation visible at all times.
position: relative allows you to change an elements position relative to what it would be in the normal document flow. For example, a "p" element with the following CSS:
page{ position: relative ; left: 30px ;}
would be indented from the left side of the screen by 30 pixels. Note that other content will not be adjusted to fill in any gap created by this new element position.
position: fixed is positioned relative to the browser viewport. This means it always stays in the same place even if the page is scrolled. For example, a "div" element with the following css:
div { position: fixed ; top: 0 ; }
would remain at the top of the browser viewport as you scrolled down the page.
position: absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static.
It's important to note that when elements are positioned, they can overlap other elements. This is what the z-index property is for. It specifies the back to front order of overlapping elements (elements with a higher z-index are positioned at the top). Z-index can be either negative or positive.
So that briefly covers "position" now what about the display property. You'll remember that earlier I said that HTML elements can be either block or inline -- well the display property let's us change that default value. With the advent of HTML 5 there are a lot more values for display (you can find them all at: http://www.w3schools.com/cssref/pr_class_display.asp) but let's talk about a few that you're most likely to use.
display: none does just what you think it would from the name - it means that the element doesn't display at all (and it takes it out of the document flow so that it takes no space on the page.) Why would you want to do this? Well think about when you have a menu that sub-menu items that are revealed when you rollover (or click) on them. This is often accomplished by setting an element to display: none when the page is loaded and the changing it to display: block when it is clicked or when the mouse is "hovering" over it.
As I said earlier display: block and display: inline are the default states for most HTML elements but sometimes it's useful to change the defaults. Imagine that you have a list that you'd like to server as a horizontal navigation. Your HTML might look something like this:
<ul class="primary-nav">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
ul and li are block elements so in the normal document flow the items would display stacked from top to bottom with each item on a seperate line. However, if we add the following CSS rule we can get the list to display horizontally:
.primary-nav li { display: inline ; }
The newest value (in CSS3) is display: flex. This is not a final standard yet but is close enough that it is being used to handle layouts that were difficult to achieve in earlier versions of CSS. You can learn more about flex layouts at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
