Absolute container and absolute children

 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div,h1,p {
  border: 1px solid #000000;
  margin: 5px;
  background-color: #ffffff;
}

div {
  width: 300px;
  height: 120px;
}
div#page1 {
  position: absolute;
  top: 20px;
  left: 20px;
}

p.para1 {
  position: absolute;
  top: 50px;
  left: 20px;
  width: 250px;
}
p.para2 {
  position: absolute;
  top: 80px;
  left: 20px;
  width: 250px;
}
</style>
</head>

<body>
<div id="page1"> 
    <h1>Heading One</h1>
    <p class="para1">This is paragraph one.</p>
    <p class="para2">This is paragraph two.</p>
</div>

</body> 

</html>

Related examples in the same category

1.	Float right in a relative positioned container
2.	Float left in a relative positioned container
3.	everything floated
4.	Nested floating container
5.	float: right in a container
6.	relative position and absolute descendant
7.	Absolute container and absolute child with offset to left and right
8.	Descendant elements must always have a z-index higher than that of their parent.
9.	By default, the first absolutely positioned element has a z-index value of one, and with each subsequent element, the z-index is increased.
10.	Smaller container but larger children
11.	Stretched Absolute Top Aligned

Absolute container and absolute children : Container Layout « Layout « HTML / CSS

Related examples in the same category