Positioning Web Page Elements

What is Positioning?

The Cascading Style Sheets (CSS) positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

There are four different positioning methods

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning

An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled.

Note: Internet Explorer supports the fixed value only if a !DOCTYPE is specified.

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

Fixed positioned elements can overlap other elements.

Relative Positioning

A relative positioned element is positioned relative to its normal position. Relatively positioned elements are not pulled out of the normal flow; they are just repositioned according to where they sit in the HTML flow.

HTML for the above example:

<div id="relative1">This first div tag has a left relative position of -20px</div>
<div id="relative2">This second div tag has a left relative position of 250px and
a top relative position of -36px (to bring it up to the level of the previous div).
  Notice the blank space below. </div>

CSS for the above example

#relative1 {
	position: relative;
	width: 200px;
	border: 1px #000000 dotted;
	left: -20px;
	padding: 3px;
}
#relative2 {
	position: relative;
	width: 400px;
	border: 1px #990000 dotted;
	left: 250px;
	top: -36px;
	padding: 3px;
}

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements.

HTML

<div id="absolute1">
This div tag has relative positioning.
<div id="absolute2">
 
This div tag is nested in the relative div,
      and it has absolute positioning 10px from the right and 10px from the bottom
</div>
</div>

CSS

#absolute1 {
	position:relative;
	width: 550px;
	border: 1px #000000 dashed;
	left: 25px;
	padding: 6px;
	background-color: #efefef;
	margin-top: 75px;
}
#absolute2 {
	position: absolute;
	width: 250px;
	border: 3px #000 double;
	right: 10px;
	bottom: 10px;
	padding: 4px;
	background-color: #990000;
	color: #ffffff;
}

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order. An element with greater stack order is always in front of an element with a lower stack order.

HTML

<div id="header">
	<a href="http://www.edtechblog.org/image.png">
	<img src="http://www.edtechblog.org/image.png"
	alt="header image" width="300" height="102" />
	</a>
<div id="form_header">
<form id="searchform" method="get" action="http://www.mysite.com">
<input type="text" name="s" id="s" size="20" />
<input type="submit" value="Search" />
          </form>
</div>
</div>

CSS

	#header {
		position: relative;
		left: 100px;
		width: 300px;
		border: 2px #000000 solid;
	}
	#form_header {
		position: absolute;
		z-index: 10;
		top: 10px;
		left: 200px;
		width: 200px;
		border: blue dashed 2px;
	}