Maximum value for CSS position

Question

I'm just curious as to what the maximum value you can enter for something like absolute positioning and for it to still be fully honoured by the browser (let's say modern-ish, so IE8+):

.foo {
  left: 9999px;
}

After having a search around I stumbled across this answer which say's there is (virtually) no limit to what you can have as a z-index value, however I would think that these two properties work differently.

Also, what impact might this have on performance?

possible duplicate of [What's the maximum pixel value of CSS width and height properties?](http://stackoverflow.com/questions/16637530/whats-the-maximum-pixel-value-of-css-width-and-height-properties) This answer is about `width` and `height`, but it seems the same for `left` in my investigation. — showdev, Oct 29 '14 at 18:06
@showdev just because the answer may be the same does not make this question a duplicate. I would argue that its not as logicaly there is no relation between a size property and a position property. — , Oct 29 '14 at 20:18
I'm theorizing that all pixel values are limited consistently within a browser, regardless of the property. But it's only a theory. `Margin` hits the same limits. — showdev, Oct 29 '14 at 20:24

score 1 · Accepted Answer · answered Oct 29 '14 at 19:51

According to the test below, all Firefox, Chrome and IE8 have the same problem, but at different values.

The serious problem starts more or less at

Chrome: 33554430
Firefox: 17895700
IE8: 1193050

But, on Firefox and Chrome, much before that number, some elements are shifted one or two pixels to the left or to the right. I didn't see that on IE8.

Moreover, on Chrome, the inputs can stop working around 33553900.

Screenshot of the problem

var num = document.getElementById('num'),
    init = document.getElementById('init'),
    render = document.getElementById('render'),
    result = document.getElementById('result');
render.onclick = function() {
  result.innerHTML = '';
  var from = +init.value,
      to = from + +num.value;
  for(var i=from; i<to; ++i) {
    var wrapper = document.createElement('div');
    wrapper.className = 'wrapper';
    wrapper.style.marginLeft = -i + 'px';
    var first = document.createElement('div');
    first.style.left = i + 'px';
    first.setAttribute('data-num', i);
    var last = document.createElement('div');
    last.style.left = i+10 + 'px';
    last.setAttribute('data-num', i+10);
    wrapper.appendChild(first);
    wrapper.appendChild(last);
    result.appendChild(wrapper);
  }
}

.wrapper {
  margin: 10px 0;
}
.wrapper > div {
  position: relative;
  width: 10px;
  height: 10px;
  background: red;
}
.wrapper > div:after {
  content: attr(data-num);
  font-size: 10px;
  line-height: 10px;
  float: left;
  margin-left: 15px;
}

Render <input type="number" id="num" value="100" /> elements
starting with <input type="number" id="init" value="0" />
<input type="button" id="render" value="Render" />
<div id="result"></div>

Thanks for this. What do you mean by "serious problems"? Is this that the inputs stop working or something else? — Mike F, Nov 03 '14 at 10:26
@MikeF I meant that the boxes should be separated by 10px but at some point they tend to get together. The minor problem is the small shift of one or two pixels that happens before. I guess that inputs stopping working could be considered serious too. — Oriol, Nov 03 '14 at 15:38

Maximum value for CSS position

1 Answers1

Linked