Full Stack MERN Web Development
CSS Relative Positioning
- Relative Positioning
- works the same way as static, but lets you change the elements position
- element remains in the normal page flow so, moving the element will have
no effect on surrounding elements - use top, bottom, left, and right to modify it's position
- changes it's position relative to it's PARENT element, and
relative to ITSELF
(where it would be in the normal page flow) - (this means it is relative to it's ORIGINAL position WITHIN the
confines of the PARENT element)
- The element stays in the page flow but is offset based on directional properties
- top, bottom, left, right
- The original space is preserved, as if the element is still there
- It is used as a positioning context for absolute child elements
- Minor adjustments can be made without major layout impact
In the following example, we moved the red "20% OFF" graphic,
from just below the image, centered, to the top right corner of the image.
- How we did it
- We did this by setting the "parent element" to [ position: relative; ].
- In this case, the parent element is the div line
- < div class="product-image">
- In this case, the parent element is the div line
- We then set the "20% OFF" graphic to be "absolute" positioned to it's "relative"
parent
container,
- so in the CSS we set the style for < class="promo-banner"> as follows,
- position: absolute;
- top: 0;
- right: 0;
- so in the CSS we set the style for < class="promo-banner"> as follows,
So, we can set the "20% OFF" graphic anywhere we want within the parent image because it is positioned "absolute" within it's "relative" parent.
Amazing Product
$100
$80
This Amazing Product is crafted with precision and love, perfect for your daily needs. Limited stock available!