How to remove Left property when position: absolute?

Question

I'm overriding the site CSS to an RTL version when specific language is chosen.

I have an element which has to have absolute positioning. In the LTR version, I do left: 0px; and it's aligned to the left; in the RTL version I want to do the opposite with right, but the left property isn't overridden so it still stays to the left.

• I've tried hacking with !important, but that didn't work.
• I've tried setting left: none, but that didn't work.

How can I either set it to none or remove it completely while overriding?

Boland

To remove only a specific css attribute such as left use: var cssObject = $('selector').prop('style'); cssObject.removeProperty('left'); – Portia

developer.mozilla.org/en-US/docs/Web/CSS/left is described. Initial value is auto – Fatback

if you got here looking for a way to remove some property in tailwind when using different breakpoints, it is md:left-[unset] – Stat

Answer 1

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;
}

Priedieu

Answer 2

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.

Latterll

IE puts the "IE" in "I'llnever dIE." – Imidazole

In the end of year 2017 Microsoft Edge build 10565+ supports it – Refuse

Just used this for clearing a right position for responsive change - worked perfectly (in Chrome) – Wotton

get my upvote for the 2022 prediction – Fervency

Answer 3

left: initial

This will also set left back to the browser default.

But important to know property: initial is not supported in IE.

Michigan