You can use the property position to alter the position of block elements.
Each element has a natural location inside a page's flow, in the order read in by the browser.
By default (position:static), elements are displayed from top to bottom in the normal flow. For block elements, line breaks are inserted at the beginning and the end to form a rectangular box.
You can remove the box from the normal flow and specify its location with respect to either its parent element (position:absoluteposition:fixed); you can also move the box with respect to its normal-flow position (position:relative).
For non-static positioned elements, the new position is specified via top, left, bottom, right, width, height properties:
- top|left|bottom|right: Set the distance from the edge of this element to the corresponding edge of the containing block.
- width|height: Set the width and height of this block element.
- z-index: When two blocks overlap due to re-positioning, the one with larger
z-indexnumber is on top (i.e., z-axis is pointing out of the screen as in the standard 3D graphics coordinates system). Negative number is allowed. - overflow, overflow-x, overflow-y: Specify how to handle content overflowing the block's width/height.
- overflow-wrap: normal|break-word|inherit: specify whether or not the browser can break lines with long words, if they overflow the container.
position:static (default)
The default position:static positions the element according to the normal flow of the page, in the order that is read by the browser. Properties top, right, bottom, left has no effect for static.
position:relative
Move the element relative to its normal-flow position. The original space occupied by this element is preserved. The surrounding elements are not affected. For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test CSS "position" Property</title>
<style>
div.up {
position: relative; /* relative to normmal-flow position */
top: -20px; /* from the top of normal-flow */
left: 30px; /* from the left of normal-flow */
}
div {
height: 80px;
width: 200px;
background-color: lightgray;
margin: 5px;
}
</style>
</head>
<body>
<div>Division 1</div>
<div class="up">Division 2</div>
<div>Division 3 (Division 2 preserves its space)</div>
</body>
</html>
position:absolute
Position the element relative to the first non-static ancestor element; or <body> if no such element is found. Absolute-positioned element is taken out from the normal flow, as if it does not present.
To absolutely position an element in a containing element (other than <body>), declare the containing element relative without any movement, e.g., container { position:relative }.
For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test CSS "position" Property</title>
<style>
#left-panel {
position: absolute;
top: 10px; /* from top edge */
left: 10px; /* from left edge */
width: 200px;
height: 600px;
background-color: lightblue;
}
#main-panel {
position: absolute;
top: 10px; /* from top edge, same as left-panel */
left: 220px; /* from left edge 10+200+10 */
width: 560px;
height: 600px;
background-color: lightgray;
}
</style>
</head>
<body>
<div id="left-panel">Left Panel</div>
<div id="main-panel">Main Panel</div>
</body>
</html>
position:fixed
The element is fixed at the position relative to the browser's window, and it does not scroll away. The position is defined in top, left, bottom, right (or width and height) properties.
Fixed-positioned element is taken out of the normal flow, as if it is not present.
For example, a fixed <div> is added to the above example in absolute positioning.
Take note that z-index is used to ensure that the fixed <div> is always on top of the other <div>'s, regardless of the order of writing the <div>'s.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test CSS "position" Property</title>
<style>
#left-panel {
position: absolute;
top: 10px; /* from top edge */
left: 10px; /* from left edge */
width: 200px;
height: 600px;
background-color: lightblue;
}
#main-panel {
position: absolute;
top: 10px; /* from top edge, same as left-panel */
left: 220px; /* from left edge 10+200+10 */
width: 560px;
height: 600px;
background-color: lightgray;
}
#fixed-panel {
position: fixed;
top: 50px;
left: 100px;
width: 200px;
height: 200px;
background: lightgreen;
z-index: 200; /* larger z-index is on top */
}
</style>
</head>
<body>
<div id="left-panel">Left Panel</div>
<div id="main-panel">Main Panel</div>
<div id="fixed-panel">Fixed Panel (does not scroll away)</div>
</body>
</html>
