Relative positioned container with absolute positioned child to the top and right : Box Layout « Style Basics « HTML / CSS






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

Relative positioned container with absolute positioned child to the top and right

 



<!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' xml:lang='en'>
    <head>
        <title>positioning</title>
        <style rel='stylesheet' type='text/css'>
body {
    background: lightyellow;
}
div#container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
    background: red;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
    background: lightblue;
    top: 0;
    right: 0;
}
        </style>
    </head>
    <body>
        <div id='container'>
            <div id='one'></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.Positioned parent and non-position child
16.Sized Absolute
17.Sized relative
18.Shrinkwrapped Absolute
19.Shrinkwrapped Relative
20.Static container and absolute child to top and left
21.Static postioned container and absolute child to the top and right
22.Static positioned container with child to the bottom and left
23.Static positioned container with child to the bottom and right
24.Relative positioned container with absolute positioned child to the top and left
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