|
| |
| absolute positioning for header panel |
|
|
|
|
|
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>Fixed Positioning</title>
<style rel="stylesheet" type="text/css">
div.header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
color: red;
background-color: pink;
}
p {
width: 300px;
padding: 5px;
color: yellow;
background-color: blue;
}
p.one {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="header">asdfasdf</div>
<p class="one"><p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
</p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
</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. | Remove an element from the normal flow and move it into its own layer with absolute position. | | | | 24. | absolute positioning | | | | 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 | | |
|