Box model for child and parent relationship

  


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  color: #000;
  background-color: #ccc;
}

#one {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
}
#two {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 300;
  padding: 10px;
  background-color: #ccc;
  border: 1px solid #000;
  width: 20%;
}
#three {
  position: absolute;
  top: -30px;
  left: -30px;
  z-index: 3;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
}
#four {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 4;
  padding: 10px;
  background-color: #ccc;
  border: 1px solid #000;
  width: 20%;
}


  </style>
</head>

<body>
  <div id="one">1<div id="two">2</div></div>
  <div id="four">4<div id="three">3</div></div>
</body>


</html>

Related examples in the same category

1.	Box Dimensions
2.	Box Model defines properties of: display, width, height, padding, border, margin, background, overflow, and visibility.
3.	Spacing: indentation, margins, padding, letter spacing, word spacing, text justification, and line spacing
4.	Box Model Basics
5.	Understanding the Box Model
6.	The margin Properties
7.	The Padding Properties
8.	Inner box
9.	Inner box with DIV
10.	Inner box padding and border
11.	Left text alignment for inner box
12.	Box model with div
13.	Width setting
14.	block multiline inline box model with margin and padding
15.	Float left in a container
16.	Float inside
17.	Simple float clearing in Mozilla
18.	Setting box dimensions and aligning text
19.	Floating elements and element boxes
20.	Setting borders of an element
21.	Block Box
22.	Table Box
23.	border and padding shrink the inner box of stretched absolute boxes.
24.	A percentage of the height of its container.
25.	A percentage of the width of its container.
26.	auto is the default value for width and height.
27.	Style sheet for boxModel illustration

Box model for child and parent relationship : Box model Basics « Style Basics « HTML / CSS

Related examples in the same category