An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div.relative { position: relative; border: 3px solid #8AC007; } div.relative { position: relative; left: 30px; top: 150px; border: 3px solid #8AC007; } </style> <body> <div class="relative">This <div> element has position: relative; without any other positioning. It behaves like a static element.</div> <br /><div class="relative2">This <div> element has position: relative; with left positioning of 30 pixels and 150 pixels from the top. Notice that it leaves a white space between the other two elements.</div> <br /><div class="relative">This <div> element has position: relative; which is the same as the first block, and without other positioning.</div> </body> |
This <div> element has position: relative; without any other positioning. It behaves like a static element.
This <div> element has position: relative; with left positioning of 30 pixels and 150 pixels from the top. Notice that it leaves a white space between the other two elements.
This <div> element has position: relative; which is the same as the first block, and without other positioning.
|
