What Is The Maximum Allowed Negative Value for CSS Left Property

What is the maximum allowed negative value for css left property?

From MDN:

There is no official range of valid values. Opera supports
values up to 2^15-1, IE up to 2^20-1 and other browsers even higher.
During the CSS3 Values cycle there were a lot of discussion about
setting a minimal limit to support: the latest decision, in April 2012
during the LC phase, was [-2^27-1; 2^27-1] # but other values like 2^24-1
and 2^30-1 were also proposed # #. The latest Editor's draft doesn't
list a limit anymore.

how to put css max-left or min-left position to absolute object?

You can use CSS3 Media Queries to achieve that

So:

#element {
  position:absolute;
  left: 70%;
}

If you don't want it to overlay an object when you have a smaller screen or resize the
window, you can add after that:

@media all and (max-width: 980px) {
    #element{
        margin-left: 0px;
        left: 220px;
    }
}

When the screen width is less than 980px, the #element object will be fixed to 220px.

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

If I were to make a graphical representation, I'd probably go with something like this (not to scale):

negative top margin

The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.

Bonus:

Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?

Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

Why does CSS not support negative padding?

I recently answered a different question where I discussed why the box model is the way it is.

There are specific reasons for each part of the box model. Padding is meant to extend the background beyond its contents. If you need to shrink the background of the container, you should make the parent container the correct size and give the child element some negative margins. In this case the content is not being padded, it's overflowing.

How can I get a negative value of a CSS variables in a calc() expression?

Yes you can do it. Simply multiply by -1:

:root {  --margin: 50px;}
body {  margin: 0 100px;  border:1px solid;}
.box-1 {  background: red;  height: 100px;  width: 200px;  margin-left: calc(-1 * var(--margin));}
.box-2 {  background: green;  height: 100px;  width: 200px;  margin-left: calc(-1 * (-1 * var(--margin))); /* You can also nest calculation */}

<div class="box-1"></div><div class="box-2"></div>

Is there a way to make CSS calc() never be a negative value?

Premising that there's no way to bound the values computed by calc() you could use a mediaquery when max-height is at most 650px

.my-margin-top {
    margin-top: calc(50vh - 325px);
}

@media all and (max-height: 650px) {
   .my-margin-top {
       margin-top: 0;
   }
}

or you might also revert the logic by wrapping the existing rule into a min-height mediaquery

@media all and (min-height: 650px) {
   .my-margin-top {
       margin-top: calc(50vh - 325px);
   }
}

text-indent minimum negative value

A safe value is probably -32768px, however this is not part of spec but rather an observation of a (possibly outdated) implementation-specific legacy restriction.

Before CSS property values can be applied to elements at render-time, those declarations have to be parsed into something more operable and abstract than, effectively, a string. I mean, you can type almost anything as a property value:

.a {text-indent: -999px;}
.b {text-indent: -99999999px;}
.c {text-indent: medium potato;}

The first example would, fingers crossed, get parsed correctly; the last one is invalid and would be ignored (since a medium potato is not currently part of w3c CSS spec); but the middle one would be quirky should it overflow (not "fit" in memory as allocated by the browser). I've put together a fiddle and these are the text-indent values at which the browsers "choked" and defaulted to zero:

#On OSX 10.8 Lion 64bit:
Safari 6       -2^31
Chrome 22      -2^26  #your original -99999999px would have failed here
Firefox 14     -2^70
Opera 12       -2^70

#On Win Server 2008 64bit:
Firefox 13     -2^70
Chrome 21      -2^70
IE 9           -2^70

~~This got me curious, I'll run more tests on another box tomorrow.~~ Results above updated, nothing too excited. You can also run your own test using this fiddle - the first item that remains visible would show the value applied that got ignored. ~~I'm assuming the values would vary depending on the browser/OS used as well as possibly hardware.~~

I remember first seeing a practical reference of such a limitation in an article on styling faux columns^ that suggested a conservative constraint to be that of a 16-bit signed integer (from -32768 to +32767) - which would apply to not only text indents but other length values. I'm not aware of how consistent this value is across different browsers and their versions, nor how applicable it would be to fractions or values expressed in different units.

Using negative CSS Custom Properties

As of this posting, March 2018, the only way to use negative custom properties is by multiplying it by -1 with the calc function.

// Vanilla CSS
.class {
  margin-bottom: calc(var(--margin-md) * -1);
}

CSS using negative relative positioning issue

Paul is correct. margin-top: -60px; instead of top: -60px;. Another possible solution would be to set the "mainbody" to position: relative; then to use position: absolute; bottom: 60px; on the footer - although this woild mean the footer needs to be moved inside "mainbody". though as long as the parent of footer flows with "mainbody" you could use this same trick on that element instead.

What Is The Maximum Allowed Negative Value for CSS Left Property