Relative parent and abolute child : float and position « Layout « HTML / CSS






  1. HTML / CSS
  2. Layout
  3. float and position

Relative parent and abolute child

 

<!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">
* .parent {
  position: relative;
  padding: 20px;
  background: red;
}

* .relative2 {
  position: relative;
  z-index: 2;
  top: 20px;
  left: -30px;
  background: gold;
}

* .absolute {
  position: absolute;
  z-index: 1;
  top: 102px;
  left: 215px;
  background: gray;
}

</style>
</head>
<body>
<div class="parent"> 
  <span class="absolute">absolute</span>
</div> 
</body>
</html>








Related examples in the same category

1.Relative Float
2.Relative parent and relative child
3.Sized left float
4.Right-retracted Float
5.Float left shrunk
6.Sized float right
7.Left-retracted Float
8.Float right shrunk
9.Right-extended and Top-extended Float
10.Float-left clear-left shrunk
11.Float-right clear-right shrunk
12.Two floats with 50% width and no margins, borders, or padding
13.Two floats with 50% width and 1px border
14.Two floats with 45% width and 5% left margin
15.Two floats with 49.5% width and 5px left margin
16.Two Floating Sections: 25% of container's width, 55% of container's width minus left margin, left border, left border, and left padding
17.Float Divider with clear both
18.Opposing Floats
19.Two childred Floating left
20.Floating Positioning
21.Floating around table
22.float highlighted dimensions with multiple paragraphs
23.float with default margin padding
24.float multiple blocks
25.float left and right