Maximum value for CSS position

问题

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?

回答1:

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.

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>

来源：https://stackoverflow.com/questions/26637545/maximum-value-for-css-position

标签

css

performance

css-position