CSS Positions, TutorialsPoint, CSS Positions Tutorial

CSS Positions

The position property specifies the type of positioning method used for an element (static, absolute, fixed and relative ). Elements are then 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 position value.

1. Position Static

2. Position Absolute

3. Position Fixed

4. Position Relative

Position Static

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, right, and z-index properties.

<!DOCTYPE html>
<html>
<title>Position Static</title>
<head>
<style type="text/css">
  .position_static {position: static; border: 3px solid #73AD21; padding:15px 10px;}
</style>
</head>

<body>

<h3>position: static;</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
 
<div class="position_static">This div element has position: static;</div>

</body>
</html>

Output :

position: static;

This div element has position: static;

Position Absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Position Absolute</title>
<style type="text/css">
    .position_box{ position:absolute; top:15px; left:100px; color:#fff; width:50%; background:#4cafdf; padding:10px; }
    .container{padding: 15px; margin: 10px; position: relative; border: 2px solid black;}
    .container p{line-height: 20px;}
</style>
</head>

<body>

<div class="container">
        <div class="position_box">
            <h4>Positioned Absolute Box</h4>
            <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
        </div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>

</body>
</html>

Output :

Positioned AbsoluteBox

Note: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Position Fixed

The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned relative to the browser window, and doesn't move even you scroll the window.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Position Fixed</title>
<style type="text/css">
    .position_box{ position:fixed; top:15px; left:100px; color:#fff; width:50%; background:#0099da; padding:10px; }
    .container{padding: 15px; margin: 10px; position:relative; border: 2px solid black;}
    .container p{line-height: 20px;}
</style>
</head>

<body>

<div class="container">
        <div class="position_box">
            <h4>Positioned Fixed Box</h4>
            <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
        </div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
 </div>

</body>
</html>

Output :

Positioned Fixed Box

Position Relative

A relative positioned element is positioned relative to its normal position. Then the box is shifted from this normal position according to the properties : top or bottom and/or left or right.

<!DOCTYPE html>  
<html> 
   <title>Position Relative</title>
<head>  
<style>  
h3.position_left {position:relative; left:0px; }  
h3.position_right {position:relative; left:50px;  }  
</style>  
</head>  

<body> 
 
<h2>This is Position Relative Heading</h2>  
<h3 class="position_left">This heading is positioned left according to its normal position</h3>  
<h3 class="position_right">This heading is positioned right according to its normal position</h3>  

</body>  
</html>

position: static;

Positioned AbsoluteBox

Positioned Fixed Box

This is Position Relative Heading

This heading is a positioned left according to its normal position

This heading is a positioned right according to its normal position