Control the stacking order of a float or an element in the normal flow. : position relative « Layout « HTML / CSS






  1. HTML / CSS
  2. Layout
  3. position relative

Control the stacking order of a float or an element in the normal flow.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css" media="Screen">
* .ontop {
  z-index: 1;
  background: red;
}

* .static {
  position: static;
  background: yellow;
}

* .relative {
  position: relative;
  background: gold;
}

* .absolute {
  position: absolute;
  z-index: auto;
  background: blue;
  color: white;
}

* .offset {
  left: 20px;
  top: auto;
  background: pink;
}
</style>
</head>
<body>
<div class="relative">Before Relative Positioning 
  <p class="static">Static Block 
  <span class="static ontop">Static Inline on top</span></p> 
  <p class="static ontop">Static Block on top</p> 
  <p class="absolute">Absolute</p></div> 
  <div class="relative">After Relative Positioning 
  <p class="relative">Relative Block 
  <span class="relative ontop offset">Relative Inline on top</span></p> 
  <p class="relative ontop">Relative Block on top</p> 
  <p class="absolute">Absolute</p>
</div> 

</body>
</html>








Related examples in the same category

1.position:relative positions an element at an offset from its location in the normal flow.
2.Using Relative Positioning
3.relative position to the bottom and left
4.Relative position to the right and top
5.position relative: top left
6.position relative and absolute
7.Centre an element of no specified width
8.Relative positioning of elements
9.Relative positioning uses left, top, and z-index to control the offset of the box.
10.relative positioning
11.This element is offset from its original position.
12.element is positioned to the bottom left of the relatively positioned element.
13.Element is positioned to the bottom right of the relatively positioned element.
14.This element is positioned to the top right of the relatively positioned element.
15.This element is positioned to the top left of the relatively positioned element.