Positioning Content

There are a few different types of positioning within CSS, and each has its own application

Positioning with Floats

Essentially, the float property allows us to take an element, remove it from the normal flow of a page, and position it to the left or right of its parent element. All other elements on the page will then flow around the floated element. An element floated to the side of a few paragraphs of text, for example, will allow the paragraphs to wrap around the image as necessary.

For reference, when an element is floated, it will float all the way to the edge of its parent element. If there isn’t a parent element, the floated element will then float all the way to the edge of the page.

When we float an element, we take it out of the normal flow of the HTML document. This causes the width of that element to default to the width of the content within it.

Floats May Change an Element’s Display Value

When floating an element, it is also important to recognize that an element is removed from the normal flow of a page, and that may change an element’s default display value. The float property relies on an element having a display value of block, and may alter an element’s default display value if it is not already displayed as a block-level element.

For example, an element with a display value of inline, such as the <span> inline-level element, ignores any height or width property values. However, should that inline-level element be floated, its display value will be changed to block, and it may then accept height or width property values.

As we float elements we must keep an eye on how their display property values are affected.

Clearing & Containing Floats

One of those pitfalls is that occasionally the proper styles will not render on an element that it is sitting next to or is a parent element of a floated element. When an element is floated, it is taken out of the normal flow of the page, and, as a result, the styles of elements around that floated element can be negatively impacted.

Often margin and padding property values aren’t interpreted correctly, causing them to blend into the floated element; other properties can be affected, too.

Another pitfall is that sometimes unwanted content begins to wrap around a floated element. Removing an element from the flow of the document allows all the elements around the floated element to wrap and consume any available space around the floated element, which is often undesired.

To prevent content from wrapping around floated elements, we need to clear, or contain, those floats and return the page to its normal flow. We’ll proceed by looking at how to clear floats, and then we’ll take a look at how to contain floats.

Clearing Floats

Clearing floats is accomplished using the clear property, which accepts a few different values: the most commonly used values being left, right, and both.

div {
  clear: left;
}

Containing Floats

Rather than clearing floats, another option is to contain the floats. The outcomes of containing floats versus those of clearing them are nearly the same; however, containing floats does help to ensure that all of our styles will be rendered properly.

To contain floats, the floated elements must reside within a parent element. The parent element will act as a container, leaving the flow of the document completely normal outside of it. The CSS for that parent element, represented by the group class below, is shown here:

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}

Positioning with Inline-Block

In addition to using floats, another way we can position content is by using the display property in conjunction with the inline-block value. The inline-block method, as we’ll discuss, is primarily helpful for laying out pages or for placing elements next to one another within a line.

Remember, because inline-block elements are displayed on the same line as one another, they include a single space between them.

Removing Spaces Between Inline-Block Elements

The first solution is to put each new <section>` element’s opening tag on the same line as the previous

<header>...</header>
<section>
  ...
</section><section>
  ...
</section><section>
  ...
</section>
<footer>...</footer>

Another way to remove the white space between inline-block elements is to open an HTML comment directly after an inline-block element’s closing tag. Then, close the HTML com- ment immediately before the next inline-block element’s opening tag. Doing this allows inline-block elements to begin and end on separate lines of HTML and “comments out” any potential spaces between the elements. The resulting code would look like this:

<header>...</header>
<section>
  ...
</section><!--
--><section>
  ...
</section><!--
--><section>
  ...
 </section>
 <footer>...</footer>

Uniquely Positioning Elements

By default every element has a position value of static, which means that it exists in the normal flow of a document and it doesn’t accept any box offset properties. The static value is most commonly overwritten with a relative or absolute value, which we’ll examine next.

Relative Positioning

The relative value for the position property allows elements to appear within the normal flow a page, leaving space for an element as intended while not allowing other elements to flow around it; however, it also allows an element’s display position to be modified with the box offset properties.

With relatively positioned elements, it’s important to know that the box offset properties identify where an element will be moved from given its original position. Thus, the left property with a value of 20 pixels will actually push the element towards the right, from the left, 20 pixels. The top property with a value of 20 pixels, then, will push an element towards the bottom, from the top, 20 pixels.

When we position the element using the box offset properties, the element overlaps the element below it rather than moving that element down as the margin or padding properties would.

Absolute Positioning

The absolute value for the position property is different from the relative value in that an element with a position value of absolute will not appear within the normal flow of a document, and the original space and position of the absolutely positioned element will not be preserved.

Additionally, absolutely positioned elements are moved in relation to their closest relatively positioned parent element. Should a relatively positioned parent element not exist, the absolutely positioned element will be positioned in relation to the <body> element. That’s quite a bit of information; let’s take a look at how this works inside some code:

Containing Floats

The most popular problem involves a parent element that contains numerous floated elements. Content on the page will respect the size and placement of the floated children element, but these floated elements no longer impact the outer edges of the parent container. In this event the parent element loses context of exactly what it contains and collapses, thus giving the parent element a height of 0 and ignoring various other properties. A lot of times this may go unnoticed, specifically when the parent element doesn’t have any styles tied to it and the nested elements look to have aligned correctly.

The Overflow Technique

One technique for containing floats within a parent element is to use the CSS overflow property. Setting the overflow property value to auto within the parent element will contain the floats, resulting in an actual height for the parent element, thus including a gray background in our example. in Internet Explorer on an Apple computer will also add scrollbars to the parent element, in which it is better to use the overflow: hidden; declaration.

The Clearfix Technique

Depending on the context of the floated elements a better technique to contain floats may be the clearfix technique. The clearfix technique is a bit more complex but does have better support as compared to the overflow technique.

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}

Position Property

Occasionally you need more control over the position of an element, more than a float can provide, in which case the position property comes into play. The position property accepts five different value

Position Static

Elements by default have the position value of static, meaning they don’t have, nor will they accept, any specific box offset properties. Furthermore, elements will be positioned as intended, with their default behaviors.

Position Relative

The relative value for the position property is very similar to that of the static value. The primary difference is that the relative value accepts the box offset properties top, right, bottom, and left. These box offset properties allow the element to be precisely positioned, shifting the element from its default position in any direction.

How Box Offset Properties Work

The box offset properties, top, right, bottom, and left, specify how elements may be positioned, and in which direction. These offset properties only work on elements with a relative, absolute, or fixed positioning value.

For relatively positioned elements, these properties specify how an element should be moved from its default position. For example, using a top value of 20px on a relatively positioned element will push the element 20 pixels down from where it was originally placed. Switching the top value to -20px will instead pull the element 20 pixels up from where it was originally placed.

For elements using absolute or fixed positioning these properties specify the distance between the element and the edges of its parent element. For example, using a top value of 20px on an absolutely positioned element will push the element 20 pixels down from the top of its relatively positioned parent. Switching the top value to -20px will then pull the element 20 pixels up from the top of its relatively positioned parent.

Position Absolute

Absolutely positioned elements accept box offset properties, however they are removed from the normal flow of the document. Upon removing the element from the normal flow, elements are positioned directly in relation to their containing parent whom is relatively or absolutely positioned. Should a relatively or absolutely positioned parent not be present, the absolutely positioned element will be positioned in relation to the body of the page.

Furthermore, using an absolutely positioned element and not specifying any box offset property will position the element in the top left of its closest relatively positioned parent. Setting one box offset property, such as top, will absolutely position the element vertically but will leave the horizontal positioning to the default value of flush left.

When an element has a fixed height and width`` and is absolutely positioned, thetop` property takes priority should both thetop and bottomoffset properties be declared. As with the relatively positioned elements, should an element with a fixedwidth` have both the left and right box offset properties, priority is given to the direction of which the language of the page is written.

If an element doesn’t have a specific height or width and is absolutely positioned, using a combination of the top and bottom box offset properties displays an element with a height spanning the entire specified size. Same goes for using both the left and right box offset properties, resulting in an element with a full width based on both of the left and right box offset properties. Using all four box offset properties will display an element with a full specified height and width.

Fixed Header or Footer

The code and demonstration below outline how this may be achieved. Notice how both left and right box offset properties are declared. This allows the footer to span the entire width of the bottom of the page, and it does so without disrupting the box model, allowing margins, borders, and padding to be applied freely.

<footer>Fixed Footer</footer>

body {
  background: #eaeaed;
}
footer {
  background: #2db34a;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}

Z-Index Property

By nature web pages are often considered to be two dimensional, displaying elements upon a x and y axis. However when you begin to position elements they are occasionally placed on top of one another. To change the order of how these elements are stacked, also known as the z-axis, the z-index property is to be used.

In order to apply the z-index property to an element, you must first apply a position value of relative, absolute, or fixed. Same as if you were to apply and box off set properties.