css relative相对定位的top值在不同浏览器中使用js获取的差异

针对这个问题，我会分别从CSS相对定位中的top属性以及获取top属性的方式在不同浏览器中遇到的问题进行说明。

CSS相对定位中top属性获取的差异

在CSS中，relative相对定位是指元素按照通常所在位置相对移动。相对移动的距离可以通过top、bottom、left、right四个属性进行控制。其中，top属性定义了一个元素上边缘相对于其包含元素上边缘的偏移量。

但是，这个偏移量在不同浏览器中的表现是不完全相同的。主要原因是不同浏览器处理CSS的方式不同。其中，有两个比较常见的问题：

1. 不同浏览器对于盒模型的处理方式不同：盒模型包含了margin、border、padding和content等几个部分，不同浏览器对于这些部分的计算方式是不同的。因此，在不同浏览器中，top属性可能会计算不同的盒模型部分，导致渲染出来的效果不同。

2. 不同浏览器对于文档流的处理方式不同：有些浏览器在渲染文档流的时候采用的是深度优先，而有些浏览器采用的是广度优先。这种情况下，top属性计算的结果也会出现不同。

针对这个问题，我们有两个选择：

1. 针对不同的浏览器分别写CSS：这种方式比较复杂，需要针对不同的浏览器分别写不同的样式，增加了开发难度和维护成本，不是很推荐。

2. 使用JavaScript进行上下文滚动的模拟：可以通过计算元素在相对定位后的位置以及父元素的scrollTop值来模拟上下文滚动，从而避免了浏览器的差异。这种方式需要用到JavaScript，但是可以保证在不同浏览器中的结果是一致的，是比较常用的做法。

下面，我们来看一下使用JavaScript进行上下文滚动的模拟的具体示例。

示例1

假设我们有如下的HTML代码，其中一个div元素设置为相对定位，并设置top属性：

<div id="outer" style="height: 200px; overflow: scroll;">
  <div id="inner" style="position: relative; top: 50px;">
    <p>相对定位测试</p>
  </div>
</div>

在代码中，我们给外层的div设置了固定高度，并且设置了滚动条。内层的div被设置为相对定位，并设置了top属性。

接下来，我们需要获取这个div在相对定位后的位置：

//获取内层div
var inner = document.getElementById('inner');
//获取内层div相对于包含元素的上边缘的偏移量
var offsetTop = inner.offsetTop;
//获取内层div相对于包含元素的上部可见区域的偏移量
var scrollTop = document.getElementById('outer').scrollTop;
//计算出元素在相对定位后的实际位置
var position = offsetTop - scrollTop;
console.log(position);

通过上面的代码，我们可以得到这个元素在相对定位后的实际位置。

示例2

下面我们来看一下一个更加复杂的例子。假设我们的页面上有两个元素：

<div id="outer" style="height: 200px; overflow: scroll;">
  <div id="inner1" style="position: relative; top: 50px;">
    <p>相对定位测试1</p>
  </div>
</div>
<div id="inner2" style="position: relative; top: 50px;">
  <p>相对定位测试2</p>
</div>

其中，外层的div设置了固定高度和滚动条，内层的div被设置为相对定位，并设置了top属性。现在，我们需要分别获取这两个元素在相对定位后的位置。由于这个问题中包含了两个元素，我们需要使用循环来分别计算它们在相对定位后的位置：

//获取所有元素
var elems = [
  document.getElementById('inner1'),
  document.getElementById('inner2')
];
//遍历所有元素
for (var i = 0, len = elems.length; i < len; i++) {
  //获取当前元素
  var elem = elems[i];
  //获取元素相对于包含元素的上边缘的偏移量
  var offsetTop = elem.offsetTop;
  //获取元素相对于包含元素的上部可见区域的偏移量
  var scrollTop = document.getElementById('outer').scrollTop;
  //计算出元素在相对定位后的实际位置
  var position = offsetTop - scrollTop;
  console.log(position);
}

通过上述的代码，我们可以分别获取这两个元素在相对定位后的位置，而且不会受到不同浏览器的影响。

通过上述两个示例，我们可以发现，通过JavaScript来模拟相对定位中top属性的表现是可行的，而且在不同浏览器中也有较好的兼容性。