Positioned parent and non-position child : Box Layout « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Box Layout

Positioned parent and non-position child

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" title="text/css">
* .parent {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
}

* .child{
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
}

</style>
</head>
<body>

<div class="parent">Positioned parent
  <div class="child">Non-positioned child </div>
</div> 

</body>
</html>








Related examples in the same category

1.Horizontally Stretched Static
2.Vertically Stretched Absolute
3.Horizontally Stretched Absolute
4.Indent the left and right sides of a static element
5.Move right and left with margin
6.Indent up and down with margin
7.Parent position: absolute, child position fixed or absolute
8.Parent position: relative, child position fixed or absolute
9.Parent position: absolute, child position: relative or static
10.Offset Absolute and Offset Fixed
11.Sized Block Outside to the Left of its parent
12.Sized Block Outside to the Right of its parent
13.Sized Float Outside Left to its parent
14.Sized Float Outside to the Right of its parent
15.Sized Absolute
16.Sized relative
17.Shrinkwrapped Absolute
18.Shrinkwrapped Relative
19.Static container and absolute child to top and left
20.Static postioned container and absolute child to the top and right
21.Static positioned container with child to the bottom and left
22.Static positioned container with child to the bottom and right
23.Relative positioned container with absolute positioned child to the top and left
24.Relative positioned container with absolute positioned child to the top and right
25.Relative positioned container with absolute positioned child to the bottom and left
26.Relative positioned container with absolute positioned child to the bottom and right