Remove an element from the normal flow and move it into its own layer with absolute position. : position absolute « Layout « HTML / CSS
- HTML / CSS
- Layout
- position absolute
Remove an element from the normal flow and move it into its own layer with absolute position.
<!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">
#in-place {
position: absolute;
z-index: 1;
background: red;
}
#shrinkwrapped {
position: absolute;
z-index: 0;
width: auto;
left: 0;
bottom: 0;
margin: 0;
background: blue;
}
#sized {
position: absolute;
z-index: auto;
width: 170px;
height: 115px;
bottom: 0;
left: 270px;
background: gold;
}
#stretched {
position: absolute;
z-index: -1;
height: auto;
right: 0;
top: 0;
bottom: 0;
background: pink;
}
.grandContainer{
width: 800px;
height: 800px;
background: gray;
}
.parent{
width: 600px;
height: 600px;
background: black;
color: white;
}
</style>
</head>
<body>
<div class="grandContainer"><h2>Positioned Grandparent</h2>
<div class="parent"><h2>Non-positioned Parent</h2>
Absolute elements are positioned in their own layer in front of or behind the
normal flow.
<span id="in-place" class="box">In-place Absolute</span>
<span id="sized" class="box">Sized Absolute</span>
<p id="stretched" class="box">Stretched Absolute</p>
<p id="shrinkwrapped" class="box">Shrinkwrapped Absolute</p></div></div>
</body>
</html>
Related examples in the same category
1. | Absolutely positioned Elements are positioned relative to the browser's viewport. | | |
2. | Absolutely positioned element is positioned in context to the dimensions of the relatively positioned container. | | |
3. | position:absolute positions an element from its location in the normal flow or from its nearest positioned ancestor. | | |
4. | position: absolute and to the top 100px | | |
5. | Use inline style to control the absolute position | | |
6. | Absolute position to the bottom | | |
7. | use absolute positiont to create a ladder layout | | |
8. | Use absolute position to the right to layout the menu bar section | | |
9. | position absolute, offset, top, right, bottom, left | | |
10. | position absolute: offset right | | |
11. | position absolute: offset no width, no height | | |
12. | position absolute: offset bottom right | | |
13. | position absolute: offset bottom left | | |
14. | position absolute offset | | |
15. | two block with position: absolute | | |
16. | width, height: absolute positioning | | |
17. | Absolute positioning of elements | | |
18. | Absolute position is in a relative position | | |
19. | Absolute Box | | |
20. | An absolute element is removed from the normal flow and put in a layer above or below it. | | |
21. | left, right, top, and bottom applied to absolute boxes. | | |
22. | Vertically Stretched Absolute | | |
23. | absolute positioning | | |
24. | absolute positioning for header panel | | |
25. | absolute position offset: top right bottom left | | |
26. | absolute position: offset right | | |
27. | absolute position offset: no-width, no-height | | |
28. | absolute position offset | | |
29. | absolute position offset: bottom left | | |
30. | absolute position offset: bottom right | | |
31. | Shrinkwrapped Absolute right offset | | |