Positioning

The four methods of setting the position property of a box are:

  • static
  • relative
  • absolute
  • fixed

 

 

Static

 

  • Default
  • Can be explicitly set { position: static; }
  • Each block starts a new line, just after end of previous block
  • Occupies full width
  • Normal flow down the page
<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
		<style type="text/css">
			* { font:1em Arial; }
			#container { border:solid 1px blue; padding:1em; }
			p { border:solid 1px red; margin:1em; padding:1em; }
		</style>
	</head>
	<body>
		<div id="container">
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
		</div>
	</body>
</html>

Save & refresh browser:

 

 

 

 

 

Absolute

 

  • Positioned according to its own properties
  • Outside of normal flow
  • Effectively sits on its own layer on top of the rest of the page
  • { position:absolute; } then defined values for the top, right, bottom, left properties
<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
		<style type="text/css">
			* { font:1em Arial; }
			#container { border:solid 1px blue; padding:1em; }
			p { border:solid 1px red; margin:1em; padding:1em; }
			#absolute { position:absolute; top:20%; left:20%; width:25%; background-color:#ccc; border:dashed 3px green; padding:1em; }
		</style>
	</head>
	<body>
		<div id="container">
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<div id="absolute">Absolutely positioned element</div>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
		</div>
	</body>
</html>

Save & refresh browser:

 

 

 

Relative

 

  • Positions the box to where it would have been positioned if statically positioned
  • The remaining empty space where it would have been is still preserved
  • Mainly used as a container for absolute positioned block and floats
  • { position:relative; } then defined values for the top, right, bottom, left properties
<!DOCTYPE html>
<html>
    <head>
        <title>My Document Title</title>
        <style type="text/css">
            * { font:1em Arial; }
            #container { border:solid 1px blue; padding:1em; width:50%;}
            p { border:solid 1px red; margin:1em; padding:1em; }
            #relative { position:relative; top:-2em; left:4em; background-color:#ccc; border:dashed 3px green; }
        </style>
    </head>
    <body>
        <div id="container">
            <p>A &lt;p&gt; element in the normal flow { position:static; }</p>
            <p id="relative">A &lt;p&gt; element { position:relative; top:-2em; left:4em; }</p>
            <p>A &lt;p&gt; element in the normal flow { position:static; }</p>
            <p>A &lt;p&gt; element in the normal flow { position:static; }</p>
        </div>
    </body>
</html>

Save & refresh browser:

 

 

 

Fixed

 

  • Doesn't move if the rest of the page scrolls
  • Positioning is offset from the edges of the viewport
  • Unrelated to other objects
<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
		<style type="text/css">
			* { font:1em Arial; }
			#container { border:solid 1px blue; padding:1em; }
			p { border:solid 1px red; margin:1em; padding:1em; }
			#fixed{ position:fixed; top:75px; left:1em;background-color:#ccc; border:dashed 3px green; padding:1em; }
		</style>
	</head>
	<body>
		<div id="container">
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
		</div>
		<div id="fixed">Fixed positioned element</div>
	</body>
</html>

Save & refresh browser:

 

 

 

Relative + Absolute

 

By applying relative positioning on a containing element, any elements within that container will be positioned relative to it.

IMPORTANT! The containing box must be relative to have the contained boxes positioned relative to it.

 

Therefore any absolute positioned elements within the container are relative to the container:

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
		<style type="text/css">
			* { font:1em Arial; }
			#container { position:relative; top:2em; left:4em; width:50%; border:solid 1px blue; padding:1em; }
			p { border:solid 1px red; margin:1em; padding:1em; }
			#relAbs { position:absolute; top:200px; left:200px; width: 200px; background-color:#FF0; border:solid 3px #f0f; padding:1em; }
		</style>
	</head>
	<body>
		<div id="container">
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<div id="relAbs">Absolute positioning relative to it's container</div>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
			<p>A &lt;p&gt; element in the normal flow { position:static; }</p>
		</div>
	</body>
</html>

Save & refresh browser:

Leave a Reply