Position

Contact Us or call 1-877-932-8228
Position

Position

The position property is used to determine how an element is positioned. The default value is static. Other options are:

  • absolute
  • relative
  • fixed

Absolute Positioning

When elements are positioned absolutely, they are removed from the normal flow. As a result, they do not affect the positioning of subsequent sibling elements. Elements are positioned absolutely by setting the position property to absolute and specifying one or more "offset" properties.

Offset Properties: top, right, bottom, and left

The "offset" properties are top, right, bottom, and left. Their values can be specified in number of units (e.g., 10px) or percentage of the containing block (e.g., 20%). These properties offset the element from its nearest non-statically positioned containing block element (i.e., with position set to absolute, relative, or fixed). If it has no ancestor that is non-statically positioned, then it is offset from the browser window.

Code Sample:

PositioningAndVisibility/Demos/PositioningAbsolute.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1 {
	position:absolute;
	top:70px;
	left:50px;
	border:2px solid #006;
	padding:1px;
	background-color:#600;
	color:#eee;
}
#explanation {
	color:#006;
	font-weight:bold;
	font-size:1.2em;
}
#wrapper {
	width:600px;
	background-color:#def;
	border:1px solid #006;
}
</style>
<title>CSS Absolute Positioning</title>
</head>
<body>
<div id="wrapper">
	<h1>CSS Absolute Positioning</h1>
	<h2>From the Left and the Top</h2>
	<div id="explanation">
		<p>Notice how this text is in the upper corner.</p>
		<p>That's because the preceding h1 element has been absolutely positioned.</p>
		<p>Positioning an element absolutely takes the element out of the regular flow of the document.</p>
	</div>
</div>
</body>
</html>

Code Explanation

The code above will render the following results:Results Image

Notice how the positioning of the sibling h2 and div elements is not affected by the h1 element that precedes them. This is because the h1 element has been absolutely positioned.

Now watch what happens if we push the containing "wrapper" div down 100 pixels using the margin-top property like this:

#wrapper {
	margin-top:100px;
	width:600px;
	background-color:#def;
	border:1px solid #006;
}

Result of Pushing Container div Down

Notice that the h1 element was not affected at all. That's because the "wrapper" div is not in the same flow as the h1 element. To get it in the same flow, we need to absolutely position it as well. We do that in the code below and move the div using the top property rather than margin-top:

#wrapper {
	position:absolute;
	top:100px;
	width:600px;
	background-color:#def;
	border:1px solid #006;
}

The result is shown below: Result Shown

Now let's position the h1 element from the bottom right with this code:

h1 {
	position:absolute;
	bottom:0px;
	right:0px;
	border:2px solid #00f;
	background-color:#600;
	color:#eee;
}

The code above will render the following results: Code Rendering Result

You'll notice that Firefox doesn't put the element at the very bottom of the window. The distance from the bottom will vary between browsers, but all of them seem to give some buffer.

As you can see in the screenshot below the h1 element stays the same distance from the right bottom when the browser window is resized: Widow Resized

Again, if the "wrapper" div is also absolutely positioned then the h1 element is positioned within that div element. So the code below would then render the page below it:

#wrapper {
	position:absolute;
	top:10px;
	width:600px;
	background-color:#def;
	border:1px solid #006;
}

h1 Is Contained in Wrapper

Notice that the h1 element is fully contained in the "wrapper" div.

Note that when an inline element is positioned absolutely, it become a block-level element.

Relative Positioning

When elements are positioned relatively, they are positioned relative to where they would normally appear in the flow. Unlike absolutely positioned elements, relatively positioned elements do affect the positioning of subsequent sibling elements. Elements are positioned relatively by setting the position property to relative and specifying one or more "offset" properties as described above in "Offset Properties: top, right, bottom, and left".

Code Sample:

PositioningAndVisibility/Demos/PositioningRelative.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1 {
	position:relative;
	top:60px;
	left:50px;
	border:2px solid #006;
	padding:1px;
	background-color:#600;
	color:#eee;
}
#explanation {
	color:#006;
	font-weight:bold;
	font-size:1.2em;
}
#wrapper {
	width:600px;
	background-color:#def;
	border:1px solid #006;
}
</style>
<title>CSS Relative Positioning</title>
</head>
<body>
<div id="wrapper">
	<h1>CSS Relative Positioning</h1>
	<h2>From the Left and the Top</h2>
	<div id="explanation">
		<p>The h1 element on this page has been positioned relative to where it otherwise would be.</p>
		<p>All other content on the page (including these sentences) will show up in the same position it would have if the h1 had not been positioned at all.</p>
	</div>
</div>
</body>
</html>

Code Explanation

The code above will render the following results.Relative Positioning

Notice how the paragraph text is positioned as if the h1 element had not been moved from its default position. This is because the h1 element has been relatively positioned.

Let's see what happens if we position the h1 element from the bottom right using relative positioning using the code below:

h1 {
	position:relative;
	bottom:40px;
	right:40px;
	border:2px solid #006;
	padding:1px;
	background-color:#600;
	color:#eee;
}

The code above will render the following results:Code Results

As the h1 element would normally be in the upper-left corner, it is pushed out of the browser window.

Fixed Positioning

Elements with fixed positioning stay in the same position in the browser window even when the page is scrolled. It can be used to keep an element (e.g., a navigation menu) on the page at all times.

The example below uses fixed positioning to keep a home icon that links to the home page in the upper-left-hand corner.

Code Sample:

PositioningAndVisibility/Demos/PositioningFixed.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#homeLink {
	position:fixed;
	top:20px;
	left:0px;
}
---- C O D E   O M I T T E D ----
</style>
<title>CSS Fixed Positioning</title>
</head>
<body>
<div id="wrapper">
	<a href="index.html" id="homeLink"><img src="Images/littleHome.png" alt="Home"></a>
	<h1>CSS Fixed</h1>
	<h2>In Upper-Left Corner</h2>
	<div id="explanation">
		<p>The h1 element on this page has fixed positioning.</p>
		<p>It will not move from it's place in the upper-left corner when the window is scrolled.</p>
	</div>
</div>
</body>
</html>

Code Explanation

The two screenshots below show how this code is rendered before and after scrolling: Image Before Scrolling Image After Scrolling

Notice that the home icon remains on the screen.

Next