With visibility:hidden, the element still takes up space. With display:none, it is effectively removed from the DOM.
Hiding DOM elements with CSS is a common task. Some wonder whether they should use visibility:hidden or display:none. So, let’s think about Visibility hidden vs display none. Before you decide, the question to ask yourself is: “do I want the element to still have a physical effect on the DOM? or do I want the element to feel as if it has been removed from the page?”. This is an important question. The difference between visibility:hidden and display:none in CSS is how the hidden element affects the DOM.
With CSS fixed position, the element is completely removed from the document flow, but positioned absolutely in relation to the view-port. You can then use the “top”, “bottom”, “left” and “right” properties to specify the exact location in which you want it.
Sometimes you may need to place an element in an exact position. That is, you don’t want to be tied to the natural document flow. Following the natural document flow is often the best way to go, and it is important to keep that in mind. But when you want to take an element out of the document flow and set it at an exact location in relation to the view port, position fixed is the tool for the job.
Fixed position is often confused withabsolute position, but while their behavior is somewhat similar, they are not exactly the same thing. It’s important to note here, that with absolute position, the relationship between the HTML element and its descendants matters. For a detailed discussion on absolute position, CLICK HERE.
With fixed position, there is no concern about the relationship between the HTML element and its descendants. The HTML element that you apply to fixed position is completely removed from the document flow and placed relative to the viewport. That is, this element cares only about where the viewport is. It is as if its descendants simply do not exist; it does not know about them or care about them. And once you’ve set the position to fixed, you can use the “top”, “right”, “bottom” or “left” properties to further refine the visual location of the fixed position element. In other words, these top, right, bottom and left properties allow you to specify how the fixed position element is offset from the viewport.
In Example # 1, the element with the class “child” has its CSS position property set to “fixed“. As a result, the element is completely removed from the document flow and positioned absolutely in relation to the view-port. Since there is quite a bit of text in the page, you must scroll in order to see all of it. Notice that as you scroll, the .child element stays put and does not move with the scroll. The reason that the .child element appears at the top is because its top property is set to 0. This is one of the most popular uses for position:fixed; that is, creating a page header that does not move when you scroll.
Example # 2 is mostly identical to Example # 1. The only difference is that the .child element’s top:0 property has been changed to: bottom: 0. As a result, the element is fixed to the bottom of the view-port. Notice how when you scroll, the .child element does not move away from the bottom. This is usually the technique used when you see a custom footer that stays set to the bottom of the page and does not move.
Summary
So, with fixed position, an HTML element is completely removed from the document flow. There is no concern about the descendants of that element because it is positioned relative to the viewport. Then the “top”, “right”, “bottom” and “left” properties can be used to “nudge” the element further, which means that you can determine how the element is “fixed” to the viewport and where it should appear.
With CSS relative position, the element still affects the document flow, but it can be offset, or “nudged” around from its original location. The element will appear to have been moved visually, but its effect on the DOM remains the same.
Changing the visual location of an HTML element is a common front-end web development task. The challenge is in choosing which tool should be used to accomplish this task. By “tool”, I mean which CSS property best suits the outcome you hope to have? Now, while the position property is quite often the go-to tool for this task, sometimes it can be confusing as to which CSS position property to apply. For example, absolute is similar to fixed.
But then again, absolute is sometimes confused with relative because of the ability to apply “top”, “right”, “bottom” and “left” properties to your rule set.
Just keep in mind that the confusion that surrounds absolute and relative position is mostly related to document flow. With absolute position, you are removing the element from the document flow, which is neither good nor bad; it’s just a big feature of absolute position. So, if you feel that absolute position is the tool you need, look HERE.
If you want to change the visual location of an element, yet keep it in the document flow, then CSS relative position is what you need. The element will still have the exact same physical effect on the DOM. That is to say: the other elements around it still think it is exactly where they expect it to be. But, from a purely visual standpoint, the element can be moved.
In Example # 1, we have three nested elements with the following classes applied: “child“, “parent” and “grand-parent“. From now on, let’s use those class names to refer to the elements. Each element has a specific CSS background-color property set, so that it is easier to identify.
The child element has its CSS position property set to: “relative“. It also has its CSS top and left properties set to 100px and 50px. This tells the browser: “offset this element 100px from the top and 50px from the left of where it should normally be in document flow. As a result, the child element appears pushed down 100px and pushed right 50px.
In Example # 2, we’ve added five black boxes that are siblings of the child element. They do not have position relative set, so they appear exactly where we expect them to be in the document flow. Let’s call each of these five black boxes child.black.
Notice that although our child.green box appears pushed down and pushed right, the child.black boxes are not pushed down. It may seem as though they should, since the child.green box should push them down. This is because using position relative to “nudge” an element around only has a visual effect on the DOM; it does not affect the document flow. So, all of the child.black boxes still feel as if the child.green box is exactly where they expect it to be in the DOM. The “nudging around” aspect of using position relative is purely visual.
In Example # 3, we have added position: relative to the fourth child.black box by using the CSS nth-child selector: .child.black:nth-child(4). This box is white, with a purple border. We have set it to be offset 10px from the top and 80px from the left of where it should normally be in the document flow. Just as is the case with child.green, the “nudging” is purely visual; the two child.black boxes below are not affected by this and appear as if this white box with the purple border is still were it should be in the DOM.
When making the differentiation between general sibling and adjacent sibling combinators, ask yourself if you want to target every sibling of the target element, or just the very next one.
In CSS, HTML element relationships play an important role in targeting. It’s true that you can use IDs, which means that your CSS selector can potentially be very simple. In most cases, however, IDs are not recommended. So, if you want to write CSS that is expressive and reusable, the relationship between HTML elements starts to matter.
Consequently, the concept of sibling relationships is an important one in CSS. In fact, other than parent-child relationships, the concept of siblings is possibly the one that you will need to consider most. So, with that in mind, let’s begin with the concept that there is more than one kind of sibling. And because HTML elements have order in the markup, you’ll have to decide whether you want to target ALL siblings of an element, or just the very NEXT one. The difference between these two scenarios is: when targeting ALL siblings of an element, you will be styling only one or many HTML elements. But when targeting the adjacent sibling of an element, you are styling one element. This is the difference between general sibling and adjacent sibling combinators in CSS: it’s a question of targeting one sibling or multiple siblings.
Let’s say you have 10 elements, and they all have black text. If you wanted to make every sibling of the element red text, then there would be nine elements with red text. If you wanted to just target the very next sibling after the first element, then you would have just one element with red text. That is, when you target just the very next sibling, you are targeting only one element.
In Example # 2, we use the adjacent sibling combinator. This targets only the very next sibling of li:first-child. As a result, only one of the list items has a blue background.
This is a case in which you are styling multiple HTML elements. Keep in mind that there could be only one general sibling combinator. For example, there could be two siblings total, but you target all general siblings of the first sibling. In that case, there is only one general sibling. But if there was a total of 10 siblings, and you targeted all general siblings of the first sibling, then you would wind up styling nine HTML elements. In Example # 1, there is a total of seven siblings, so you wind up styling six HTML elements. And if you targeted all general siblings of the second sibling, then you’d wind up styling five HTML elements.
This is a case in which you are styling a single HTML element, and here, there can only be one adjacent sibling of any element. A similar concept would be an array element, in which there can only be one element that is right AFTER a given array element. Likewise, with HTML elements, there can only be one adjacent sibling. Therefore, the adjacent sibling combinator will always style exactly one element.
But it is important to keep in mind that when you use the adjacent sibling combinator, you could wind up styling multiple elements. Let’s say, for example, that you target the adjacent sibling of the first list item in an unordered list. That would result in styling one HTML element. But if you have two unordered lists, the net effect would be that TWO HTML elements are styled. This is because your selector applied to TWO places in your page. In other words, there are TWO places in your HTML code where your selector makes sense. So, while we say that the adjacent sibling combinator results in targeting one HTML element, that effect could take place multiple times in your web page.
Summary
Keep in mind that relationships matter in CSS selectors. For example, while the parent-child relationship is a common one, sibling relationships are as well. General sibling and adjacent sibling combinators both provide a powerful mechanism for targeting HTML elements, and the difference between these sibling combinators is how many HTML elements will be affected. With the general sibling combinator, one or potentially multiple elements will be styled. With the adjacent sibling combinator, only one element will be styled. But, don’t forget, the net effect of your adjacent sibling combinator targeting could wind up affecting multiple HTML elements if your selector connects with multiple locations in your web page.
A block-level HTML element will always create a new line after the closing tag, whereas an inline HTML element will not
Inline vs block is one of the most important factors when choosing which HTML element to use in your markup. Semantics matter as well, and this should always be considered. But the display behavior will have a direct impact on the visual aspect of your page. With a block-level element, there will always be a new line after the closing tag. So, no matter how you organize your HTML, block-level elements always create a new line. With an inline element, there is never a new line. Therefore, no matter how you organize your inline-elements in the markup, they will always appear side-by-side.
Okay, so every HTML element that has a visual presence is either inline or block, by default. For example, HTML elements such as “SPAN”, “IMG”, and “LABEL” are inherently inline. On the other hand, HTML elements such as “DIV”, “P”, and “UL” are block by default. This default behavior can be changed, however; i.e., inline elements can be set to display:block, and block-level elements can be set to display:inline. There’s no reason why you can’t apply this kind of reverse display logic; it’s perfectly valid. Just keep in mind, though, that there may be visual ramifications, but, of course, that’s up to you. It’s just important for you to know that if you want to, you can change the default visual behavior of inline and block-level elements.
In Example # 1, there are three spans and three divs. As expected the spans all line-up side-by-side. In other words, because they are inline elements, there is no new-line after each element. Whereas with the div elements, each one appears on a new line. This is the default behavior of inline and block elements.
In Example # 2, we have reversed the behavior of the elements in the page. Even though the spans are inline elements, they now stack on top of each other. This is because in the CSS, we set display:block for the spans. As a result, they behave like block-level elements. Also, the divs now line-up side-by-side. This is because in the CSS, we set display:inline.
Summary
Now while it may seem like overkill to discuss reversing the default visual behavior of inline and block-level elements, it is not at all unusual, so it’s worth having given it a closer look. There may be semantic reasons, for example, as to why you choose a particular HTML element, but need to change its display behavior. A typical example is a NAV element; you might want to use an unordered list for your web page navigation, but you need the navigation links to line up side-by-side. In this case, you would need to change the default block-level display of the list items to inline. So, this is just one small example of why it’s always nice to know where you have a little wiggle room.
If you are a Front-End Web Developer you absolutely must be comfortable discussing CSS positioning. In this article, we’ll take a close look at each of the four types of position in CSS and how they differ
Static Positioning
“static” is probably the easiest of all four values to explain. It is the default position for any HTML element. Even when you do not specify a position value, the value of “static” is applied to that element’s position property. The easiest way to define the “static” positioning value is that when assigned, an HTML element behaves exactly as you would expect. I say this because you have probably written hundreds if not thousands of lines of CSS where you did NOT specify the position value. When you do not specify the position value, the value is “static”, and the behavior is what you would normally expect from an HTML element.
Fixed Positioning
“fixed” is the second easiest of all four values to explain. When fixed positioning is applied, an html element is positioned absolutely, relative to the browser window. It is completely removed from the document flow and has no physical effect on any other element in the DOM. The “top”,”bottom”, “left” and “right” properties can be used to “nudge” the element around, but that is it: nothing else will move that element away from its “fixed” position. Even when the document is scrolled, the target element retains its “fixed” position, relative to the browser window.
Example # 1 A
1
2
3
4
5
.fixed{
position:fixed;
left:25px;
top:25px;
}
Example # 1 B
1
2
3
4
5
.fixed{
position:fixed;
right:-50px;
bottom:50px;
}
In Example # 1A, the element with the class “.fixed” is nudged 25px in two directions. What can be deceiving is that these values are “offset from”. So, if you specify a “right” value of “25px”, the element will be moved 25px “from” the right (i.e. not “to” the right). So, the effect can be the opposite of what you might expect. The JsFiddle.net link below provides an expanded demonstration of this.
In Example # 1B, the element with the class “.fixed” is again nudged 50px in two directions. The difference here is that a negative value has been provided for the “right” property. The net result is that the element appears to be nudged “in the direction of” the specified property (i.e. 50px “to” the right), so it appears cut-off because it is 50px out of view. The JsFiddle.net link below provides an expanded demonstration of this.
When the “relative” value has been provided for the “position” property, the specified element will be positioned relative to its normal flow in the document. This may seem a bit odd at first, but think of it this way: When you simply position the element relatively, and do nothing else, nothing happens visually. But if you then specify a “top”, “bottom”, “left” or “right” value, then the element is moved in whatever direction you specified, in the amount specified (i.e. pixels, inches, em, etc…).
An important note about relative positioning is that the element’s effect on the document flow does not change. For example, if you position an element relatively and assign the “top” to “-25px” and the “left” to “-25” it will appear 25px higher and to the left of where it would normally appear in the document. But as far as the DOM is concerned, that element’s position has not changed. The point here is that “nudging” an element in any direction has no effect on the DOM. The effect is purely visual. When you look at the JsFiddle.net example link below, you can see this exact behavior in the element with the class “upAndOver”. The element appears “nudged” up 25px and over 25px, but the space that it would have normally occupied in the document flow is very much in plain sight (i.e. its “up and over” appearance has not affected the document flow).
When an element is positioned absolutely, it is positioned absolutely relative to the nearest containing element that has positioning. The browser will traverse the DOM starting with the element’s containing parent and then its descendants, until it finds one that is positioned relative, absolute or fixed. When it finds one, then it positions the target element absolutely, relative to that containing element. If it does not find a containing element and reaches the HTML element, then the target element is positioned absolutely, relative to the HTML element.
Just as with relative and fixed positioning, “top”, “bottom”, “left” or “right” values can be provided so that the exact location of the element can be specified. Unlike relative positioning, an absolutely positioned element is completely removed from the document flow and has no physical effect on any other element in the DOM. However, a byproduct of absolute positioning is that the target element will appear to have its “z-index” higher than any element that it comes into visual contact with. By default, it will appear “on top of” any element that it overlaps with. Any siblings of the target element that share the same absolute positioning will appear “on top” of the previous sibling, in the order in which they appear in the markup.
In this article we learned about CSS Positioning. We learned about static, fixed, relative and absolute. In each case, we learned how the target element interacts with the natural document flow
Q: What is the order of the Margin and Padding CSS shorthand syntax? A: Top, Right, Bottom, Left
Hint: The order is clockwise
Q: How do you set the margin-top and margin-bottom values of a purely inline element? A: You can’t. Inline elements can only have left and right margins.
Q: If you wanted more of an element’s background-color to show, which value would you increase, Margin or Padding? A: Padding. The Margin is outside of the background color.
Q: When specifying a margin value as a percentage, what is that number a percentage of? A: It is calculated with respect to the width of the generated box’s containing block.
Absolute positioning is one of the four types of CSS “position” values
When an element is given absolute positioning, the following behavior takes place: 1 – The element is positioned in the top-left-most corner of the nearest parent element that has positioning (this is the default), 2 – If no parent elements have positioning, then the element is positioned in the top-left-most corner of the browser window and 3 – You can use the “top”,”left”,”bottom” and “right” properties to place the element absolutely as you need.
Example # 1
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
<div>
<div></div>
</div>
</div>
<style>
.grand-parent{
width:600px;
height:600px;
background-color:yellow;
}
.parent{
width:400px;
height:400px;
background-color:red;
}
.child{
width:200px;
height:200px;
background-color:green;
}
</style>
In Example # 1, we have set up three container DIVs. If you look at the class names, you’ll see that there is an outermost DIV: “grand-parent”, an inner DIV: “parent” and an innermost DIV: “child”. When you look at the jsFiddle.net example, there is simply a big yellow box (the grand-parent), a smaller red box inside of the yellow box (the parent), and a small green box inside of the red box (the child).
I’ve set the height property for each element so that we don’t need to concern ourselves with any text nodes; so it’s just three empty DIVs, which look like a box, within a box, within a box.
An absolutely positioned element will be positioned relative to the nearest parent with positioning.
In Example # 2, we gave the “child” DIV absolute positioning, and set the bottom and right properties to 0. When you look at the jsFiddle.net link, the green box is in the bottom-right-hand corner of the screen. The reason for this is that an absolutely positioned element will be positioned relative to the nearest parent with positioning (i.e. “absolute”, “relative” or “fixed”). If no parent (i.e. containing) elements up the DOM have positioning, then the element will be positioned relative to the browser window. So, in this case, the green box is positioned absolutely, relative to the browser window. Because the “bottom” and “right” properties are both set to “0”, the green box appears in the bottom-right corner. If you change it to “top:0;”, then the green box will appear in the TOP-right corner of the browser window.
In Example # 3, we gave the “parent” element relative positioning. This has no visual effect on the “parent” element, but it does change things quite a bit for the green “child” DIV. Because the “parent” now has positioning, the green “child” DIV appears in the lower-right-hand corner of the red “parent” DIV. This is because it is now positioned absolutely, relative to the red “parent” DIV. Here is the jsFiddle.net link for Example # 3: http://jsfiddle.net/4KUWc/
Example # 4
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div>
<div>
<div></div>
</div>
</div>
<style>
.grand-parent{
width:600px;
height:600px;
background-color:yellow;
position:relative;
}
.parent{
width:400px;
height:400px;
background-color:red;
position:absolute;
left:300px;
top:50px;
}
.child{
width:200px;
height:200px;
background-color:green;
position:absolute;
bottom:-50px;
right:-50px;
}
In Example # 4, we have changed the red “parent” DIV’s positioning to “absolute” and given the yellow “grand-parent” DIV “relative” positioning. So let’s run down what is happening here:
The red “parent” DIV is positioned absolutely, 300px to the right, and 50px from the top of the yellow “grand-parent” DIV
The green “child” DIV is positioned absolutely, -50px from the bottom, and -50px from the right of the red “parent” DIV.
If you look at the jsFiddle.net link for Example # 4, you’ll see that the red box is now sticking outside of the right side of the yellow “grand-parent” DIV, and the green “child” DIV is sticking outside of the red “parent” DIV, 50px to the right, and 50px towards the bottom.
Here is the jsFiddle.net link for Example # 4:
Summary
CSS Absolute Positioning is quite a useful tool when it comes to nudging elements to exactly where you want them to be. So the key to mastering absolute positioning in CSS is to remember two rules:
An absolutely positioned element will be positioned relative to the nearest parent or ancestor element that is positioned relative or absolute
If there are no positioned parents, the element will be positioned absolutely, relative to the browser window