Technology Freaks: Detailed Positioning

Position Property

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

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.

In the demonstration below, all the boxes are stacked one on top of the other as they are block level elements and are not floated in any specific direction.

HTML


<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

CSS


.box-set {
  background: #e8eae9;
}
.box {
  background: #8ec63f;
  height: 80px;
  width: 80px;
}

Position Static Demo

BOX 1

BOX 2

BOX 3

BOX 4

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 fixedpositioning 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.

While the relative position does accept box offset properties the element still remains in the normal, or static, flow of the page. In this case other elements will not impede on where the relatively positioned element was originally placed. Additionally, the relatively positioned element may overlap, or underlap, other elements without moving them from their default position.

In the demonstration below you will notice that the elements are still stacked on top of one another, however they are shifted from their default positions according to their individual box offset property values. These values cause the boxes to overlap one another, yet do not push each other in different directions. When an element is positioned relatively the surrounding elements will observe the relatively positioned elements default position.

HTML


<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

CSS


.box-set {
  background: #e8eae9;
}
.box {
  background: #8ec63f;
  height: 80px;
  position: relative;
  width: 80px;
}
.box-1 {
    top: 20px;
  }
.box-2 {
  left: 40px;
}
.box-3 {
  bottom: -10px;
  right: 20px;
}

Position Relative Demo

BOX 1

BOX 2

BOX 3

BOX 4

In the event that the top and bottom box offset properties are both declared on a relatively positioned element, thetop properties will take priority. Additionally, if both the left and right box offset properties are declared on a relatively positioned element, priority is given in the direction in which the language of the page is written. For example, English pages the left offset property is given priority, and for Arabic pages the right offset property is given priority.

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.

Using absolutely positioned elements and specifying both vertical and horizontal offset properties will move the element with those property values in relation to its relatively positioned parent. For example, an element with a top value of50px and a right value of 100px will position the element 50 pixels down from the top of its relatively positioned parent and 100 pixels in from the right of its relatively positioned parent.

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.

In the demonstration below you can see how each box is absolutely positioned in relation to the parent division, of which is relatively positioned. Each individual box is moved in from a specific side with a positive value, or pulled out from a specific side with a negative value.

HTML


<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

CSS


.box-set {
  background: #e8eae9;
  height: 200px;
  position: relative;
}
.box {
  background: #8ec63f;
  height: 80px;
  position: absolute;
  width: 80px;
}
.box-1 {
  top: 6%;
  left: 2%;
}
.box-2 {
  top: 0;
  right: -40px;
}
.box-3 {
  bottom: -10px;
  right: 20px;
}
.box-4 {
  bottom: 0;
}

Position Absolute Demo

BOX 1

BOX 2

BOX 3

BOX 4

When an element has a fixed height and width and is absolutely positioned, the top property takes priority should both the top and bottom offset properties be declared. As with the relatively positioned elements, should an element with a fixed width 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 topand 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 theleft and right box offset properties. Using all four box offset properties will display an element with a full specified height and width.

Position Fixed

Using the positioning value of fixed works just like that of absolute, however the positioning is relative to the browser viewport, and it does not scroll with the page. That said, elements will always be present no matter where a user stands on a page. The only caveat with fixed positioning is that it doesn’t work with Internet Explorer 6. Should you want to force fixed positioning within Internet Explorer 6 there are suitable hacks.

Using multiple box offset properties with fixed positioning will produce the same behaviors as absolutely positioned element.

Keeping the same box offset properties from the previous demonstration, watch how the boxes are positioned in relation to the browser’s viewport and not the containing, relatively positioned parent. Clicking the link below will toggle between absolute and fixed positioning.

HTML


<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

CSS


.box {
  background: #8ec63f;
  height: 80px;
  position: fixed;
  width: 80px;
}
.box-1 {
  top: 6%;
  left: 2%;
}
.box-2 {
  top: 0;
  right: -40px;
}
.box-3 {
  bottom: -10px;
  right: 20px;
}
.box-4 {
  bottom: 0;
}

Position Fixed Demo

Turn on fixed positioning.

BOX 1

BOX 2

BOX 3

BOX 4

Fixed Header or Footer

One of the most common uses of fixed positioning is to build a fixed header, or footer, anchored to one side of a page. As a user scrolls the element stays prevalent, always within the viewport for users to interact with.

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.

HTML


<footer>Fixed Footer</footer>

CSS


footer {
  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.

Generally, elements are positioned upon the z-axis as they appear within the DOM. Elements coming at the top of the DOM are positioned behind elements coming after them. Changing this stacking using the z-index property is pretty straight forward. The element with the highest z-index value will appear on the top regardless of its placement in the DOM.

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.

In the example below, without the z-index property each box will be positioned precisely, starting with box two sitting on top of box one, then box three sitting on top of box two, and so forth. Reordering the stacking with the z-indexproperty now positions box two on top of every other box, followed by box three underneath it, and box four underneath box three.

Click the link below to toggle the z-index properties. Notice how the elements change their stacking order.

HTML


<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

CSS


.box-set {
  background: #e8eae9;
  height: 160px;
  position: relative;
}
.box {
  background: #8ec63f;
  border: 3px solid #f7941d;
  position: absolute;
}
.box-1 {
  left: 10px;
  top: 10px;
}
.box-2 {
  bottom: 10px;
  left: 70px;
  z-index: 3;
}
.box-3 {
  left: 130px;
  top: 10px;
  z-index: 2;
}
.box-4 {
  bottom: 10px;
  left: 190px;
  z-index: 1;
}

Z-Index Demo

Turn on the z-index.

BOX 1

BOX 2

BOX 3

BOX 4

Technology Freaks

Tuesday, 10 September 2013

Detailed Positioning - Part2

Position Property

Position Static

HTML

CSS

Position Static Demo

Position Relative

How Box Offset Properties Work

HTML

CSS

Position Relative Demo

Position Absolute

HTML

CSS

Position Absolute Demo

Position Fixed

HTML

CSS

Position Fixed Demo

Fixed Header or Footer

HTML

CSS

Fixed Footer Demo

Z-Index Property

HTML

CSS

Z-Index Demo