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?

To remove only a specific css attribute such as `left` use: `var cssObject = $('selector').prop('style'); cssObject.removeProperty('left');` — ilgaar, Oct 07 '13 at 11:13
https://developer.mozilla.org/en-US/docs/Web/CSS/left is described. Initial value is auto — Serkan KONAKCI, Aug 19 '20 at 17:47

Curtis · Accepted Answer · 2012-04-20T12:05:01.030

352

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

edited Apr 20 '12 at 12:05

answered Apr 20 '12 at 11:55

Curtis

101,612
66
270
352

score 27 · Answer 2 · answered Nov 04 '14 at 14:53

27

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.

answered Nov 04 '14 at 14:53

Jonas Äppelgran

2,617
26
30

1

IE puts the "IE" in "I'llnever dIE." – adam rowe Jun 13 '17 at 11:32
2

In the end of year 2017 Microsoft Edge build 10565+ supports it – Taras Yaremkiv Nov 22 '17 at 16:42
1

Just used this for clearing a `right` position for responsive change - worked perfectly (in Chrome) – SenAnan May 20 '20 at 10:04
get my upvote for the 2022 prediction – Fernando Gavinho Aug 03 '22 at 10:28

score 2 · Answer 3 · answered Sep 15 '15 at 12:17

2

left: initial

This will also set left back to the browser default.

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

answered Sep 15 '15 at 12:17

MORHERO

106
7

How to remove Left property when position: absolute?

3 Answers3

Linked