CSS3 Design Patterns Tutorial: static, relative, absolute, fixed, float and relative float

CSS3 Design patterns - positioning

1. The display of HTML elements

1.1 HTML5 block elements

Block elements, for example the <div> element, by default occupy the entire horizontal space on the page, and are positioned under each other

The HTML

<div >
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>

The CSS

#div1 {
	background-color:#ff6666;
}
 #div2 {
	background-color:#a7d155;
}
#div3 {
	background-color:#3b9bb6;
}
div1
div2
div3

Check in your browser

1.2 HTML5 inline elements

Inline elements, for example the <span> element, by default occupy the space required to enclose (shrinkwrapp) the content placed in the element. They are by default positioned after each other

The HTML

<span >
<span id="span1">span1</span>
<span id="span2">span2</span>
<span id="span3">span3</span>
</span>

The CSS

#span1 {
	background-color:#ff6666;
}
 #span2 {
	background-color:#a7d155;
}
#span3 {
	background-color:#3b9bb6;
}
span1span2span3

Check in your browser

2. The normal flow of HTML5 elements

2.1 The static position

The default position of HTML elements is the so called static position: stacked under each other for block elements and stacked after each other for inline elements. We say that the HTML elements are in the flow when there position is static. Because it is the default position, it doesn't have to be specified in the stylesheet. Confusion may occur with respect to the static position. Despite the CSS attribute-value pair position = static, the element with this property is not positioned.

An element is positioned when it has been assigned to position:relative, position:absolute, or position:fixed. Floats can be positioned using position:relative. Being positioned makes an element the reference point to which its closest absolutely positioned descendants are positioned. You can use position:static to unposition an element so that it’s rendered normally in the flow.

The CSS

#span4 {
  background-color:#ff6666;
}
#span5 {
  position:static;
  background-color:#a7d155;
  left: 50px;
  top:50px;
}
#span6 {
  background-color:#3b9bb6;
}

3. Breaking out of the flow

3.1 The absolute position

An absolute positioned <span> is removed from the normal document flow, which means that the <span> does not take space within the normal document flow. <span> 5 is absolutely positioned and is removed from the normal document flow. Because of this span 6 connects to span 4.

The CSS

#span4 {
  background-color:#ff6666;
}
#span5 {
  position:absolute;
  background-color:#a7d155;
  left: 50px;
  top:50px;
}
#span6 {
  background-color:#3b9bb6;
}
span4span5span6

Check in your browser

3.2 The relative position

A relative positioned <span> is NOT removed from the normal document flow and takes up space. The relative position determines the position relative to its original position were it would have been as a static element.

The CSS

#span7 {
  background-color:#f16529;
}
#span8 {
  position:relative;
  background-color:#a7d155;
  left: 100px;
  top:50px;
}
#span9 {
  background-color:#3b9bb6;
}
span7span8span9

Check in your browser

3.3 The fixed position

A fixed element does not scroll along with the page, useful for example a login, search or contact form in the sidebar, or a fixed top navigation menu

The CSS

#span10 {
  background-color:#f16529;
  position:fixed;
  left: 115px;
  top:100px;
}
#span11 {
  background-color:#a7d155;
 }
#span12{
  background-color:#3b9bb6;
}

Check in your browser

3.4 The float position

An element can be floated left (positioned fully to the left of its parent) or floated right (positioned fully to the right of the parent). In the example below span13 is rightfloated.

The CSS

#span13 {
  background-color:#f16529;
  float:right;
}
#span14 {
  background-color:#a7d155;
}
#span15{
  background-color:#3b9bb6;
}
span13span14span15

Check in your browser

3.5 Relative float position

A floated element can subsequently positioned relatively. In this case: after span16 was placed at the far right (rightfloated) it was subsequently positioned 50px to the left and 50px downwards.

The CSS

#span16 {
  background-color:#f16529;
  float:right;
  position:relative;
  left:30px;  
  top:-50px;
#span17 {
  background-color:#a7d155;
}
#span18{
  background-color:#3b9bb6;
}
span16span17span18

Check in your browser

3.6 Centering a block element

Setting the width of the <span> element, and the margin-left to auto, and margin-right to auto, centers a static or relative positioned block element in its parent container element. Absolute positioned block elements are not centered. Note that the inline content in the span is not centered.

The CSS

#span19{
  background-color:#f16529;
  /*width must be specified. Leaving the width attribute prohibits centering*/
  width:100px;
  /*By setting the display attribute to block we turn the span into a block element.
   *Display can only be block here. NOT inline or inline-block etc */
  display:block;
  /*position can be static or relative, but NOT absolute*/
  position:static;
  margin-left:auto;
  margin-right:auto; 
}

span19

Check in your browser

4. Example

The HTML

<div class="relative" >
    <p class="static">
		Static Positioned
	</p>
    <p class="static">
		This text contains a relatively positioned span that is 
    	<span class="relative offset">offset</span> 
		from its normal position.
	</p>
    	<em class="absolute">Absolutely Positioned</em>
    	<img class="fixed1" src="star.gif" alt="star" />
    <p class="fixed2">Fixed Positioned</p>
</div>

The CSS

div,p,em { 
margin:10px; padding:10px; 
border-left:1px solid #333; border-right:1px solid #333;
border-top:1px solid #333; border-bottom:1px solid #333;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

.static { 
  position:static; 
  background-color:#a7d155; 
}

.relative { 
  position:relative; 
  left:auto; top:auto; 
  bottom:auto; 
  right:auto; 
  background-color:#3b9bb6;
}

.absolute { 
  position:absolute; 
  left:20%; top:120px; 
  background-color:#ff6666; 
}

.fixed1 { position:fixed; 
  z-index:20; right:5px; 
  bottom:35px; 
  background-color:#6666ff; 
}


  
.offset { 
  bottom:-15px; 
  left:-20px; 
  background-color:#ff66ff;
}

Static Positioned

This text contains a relatively positioned span that is offset from its normal position.

Absolutely Positioned

Check in your browser

Leave a comment