How to Remove Left Property When Position: Absolute

How to remove Left property when position: absolute?

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

How to cancel out left/right for absolutely positioned element?

To reset the left property use

left: auto;

You can use CSS reference to get initial values of CSS properties. For example here is the reference for the left property: https://developer.mozilla.org/en/docs/Web/CSS/left

Position:absolute; left property not working correctly

To make the issue more clear here is the minimal code that illustrate the difference:

.parent {
  position: relative;
  background-color: chocolate;
}

.child {
  position: absolute;
  background-color: darkgreen;
  left: 50%;
}

<a href="" class="parent">
      I am a Parent
      <div class="child">
        I am a child
      </div>
    </a>
<br><br><br><br><br>
<a href="" class="parent">
  <div>I am a Parent</div>
  <div class="child">
    I am a child
  </div>
</a>

Remove position:absolute attribute by adding css

http://jsbin.com/ICeweli/1/

#test {
  position: absolute;
}

#test {
  position: static;
}

Remove one or the other to see the difference.

position: absolute without setting top/left/bottom/right?

The standard generally says if top/bottom, left/right are auto, then default them to their position: static values:

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

position:relative leaves an empty space

Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.

I played around with the layout a bit, and I suggest that you change these three rules to:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

how to override left:0 using CSS or Jquery?

The default value for left is auto, so just set it to that and you will "reset" it.

.elem {
  left: auto;
}

Make sure that the above comes after the original CSS file.

---

Related Topics