in what cases would you use relative positioning
- Thread starter DotCom
- Start date
CaldwellYSR
Member
relative position allows you to position that elements child elements relative to that one. For instance:
So that will make your div have an image in it's top right edge, disregarding any padding on the div. It also takes the image out of the flow of the document... so any text that stretches to that image will show up under the image.
If you didn't use position: absolute; on the image then it would show up inside the div at the top-left (inside according to how much padding is on the div). It will also push the text down below it.
position: relative comes in by keeping the image positioned relative to the div. Without that your image would be positioned relative to the body! so it would be in the top right of the window (more than likely).
Personally I don't use it all that often. That ribbon example is the only real time I've used it recently.
HTML:
<style>
#header {
position: relative;
}
.ribbon {
position: absolute;
top: 0;
right: 0;
}
</style>
<div id="header">
<img class="ribbon" src="images/ribbon.png" alt="Corner Ribbon" />
<p>Lorem ipsum blah blah blah.....</p>
</div>So that will make your div have an image in it's top right edge, disregarding any padding on the div. It also takes the image out of the flow of the document... so any text that stretches to that image will show up under the image.
If you didn't use position: absolute; on the image then it would show up inside the div at the top-left (inside according to how much padding is on the div). It will also push the text down below it.
position: relative comes in by keeping the image positioned relative to the div. Without that your image would be positioned relative to the body! so it would be in the top right of the window (more than likely).
Personally I don't use it all that often. That ribbon example is the only real time I've used it recently.
its also handy when using floats.
caldwell is right ANY absolute positioned elements look for an immediate parent with a position value other than static. using his example, if the header was width of 960 and centred, the absolute positioned element would sit flush top/left of the header when it has position:relative. however if it didnt the absolute positioned element would then search for the next available descendant, if no positioning values are found, it will head straight to sitting flush top/left of the BODY.
its a good stabiliser and doesnt do fancy things like absolute or fixed position can do, it keeps the element within the document flow. It is worth having a good understanding of ALL the position values and how they work and interact. position:relative is actually my favourite.
caldwell is right ANY absolute positioned elements look for an immediate parent with a position value other than static. using his example, if the header was width of 960 and centred, the absolute positioned element would sit flush top/left of the header when it has position:relative. however if it didnt the absolute positioned element would then search for the next available descendant, if no positioning values are found, it will head straight to sitting flush top/left of the BODY.
its a good stabiliser and doesnt do fancy things like absolute or fixed position can do, it keeps the element within the document flow. It is worth having a good understanding of ALL the position values and how they work and interact. position:relative is actually my favourite.