Absolute Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
/* Turn off relative positioning */ position: static; This is useful in the cases where we want to revert the positioning of an element used with position: absolute; property back to its original document flow.
In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.
left:auto;
This will default the left
back to the browser default.
So if you have your Markup/CSS as:
<div class="myClass"></div>
.myClass
{
position:absolute;
left:0;
}
When setting RTL, you could change to:
<div class="myClass rtl"></div>
.myClass
{
position:absolute;
left:0;
}
.myClass.rtl
{
left:auto;
right:0;
}
In the future one would use left: unset;
for unsetting the value of left.
As of today 4 nov 2014 unset
is only supported in Firefox.
Read more about unset in MDN.
My guess is we'll be able to use it around year 2022 when IE 11 is properly phased out.
left: initial
This will also set left
back to the browser default.
But important to know property: initial
is not supported in IE.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With