Remove an element from the normal flow and move it into its own layer with absolute position.

Remove an element from the normal flow and move it into its own layer with absolute position. : position absolute : Layout HTML CSS TUTORIALS


 




<!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">
#in-place {
  position: absolute;
  z-index: 1;
  background: red;
}

#shrinkwrapped {
  position: absolute;
  z-index: 0;
  width: auto;
  left: 0;
  bottom: 0;
  margin: 0;
  background: blue;
}

#sized {
  position: absolute;
  z-index: auto;
  width: 170px;
  height: 115px;
  bottom: 0;
  left: 270px;
  background: gold;
}

#stretched {
  position: absolute;
  z-index: -1;
  height: auto;
  right: 0;
  top: 0;
  bottom: 0;
  background: pink;
}
.grandContainer{
   width: 800px;
   height: 800px;
   background: gray;
}
.parent{
   width: 600px;
   height: 600px;
   background: black;
   color: white;
}
</style>
</head>
<body>
<div class="grandContainer"><h2>Positioned Grandparent</h2> 

<div class="parent"><h2>Non-positioned Parent</h2> 
Absolute elements are positioned in their own layer in front of or behind the 
normal flow. 
<span id="in-place" class="box">In-place Absolute</span> 
<span id="sized" class="box">Sized Absolute</span> 
<p id="stretched" class="box">Stretched Absolute</p> 
<p id="shrinkwrapped" class="box">Shrinkwrapped Absolute</p></div></div> 

</body>
</html>

HTML code for linking to this page:

Remove an element from the normal flow and move it into its own layer with absolute position. : position absolute : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » position absolute »

Remove an element from the normal flow and move it into its own layer with absolute position.

HTML CSS TUTORIALS