Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove Left property when position: absolute?

People also ask

How do you move something with absolute position?

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.

How do you undo an absolute position in CSS?

/* 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.

How do you position an element with an absolute position?

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.