JSFiddle - React, Tailwind, and code Playground

by Wudiemperor

HTML

<div class="position_without">
  <div class="elem1" id="el1">
    父元素没有定位的时候元素el1
  </div>
</div>
<div class="position_has">
  <div class="elem2" id="el2">
    父元素有定位的时候元素el2
  </div>
</div>
<h3>结果</h3>
<div id="J_el1" class="pos_text"></div>
<div id="J_el2" class="pos_text"></div>

CSS

.position_has {
  position: relative;
}

.pos_text {
  padding: 20px;
}

JavaScript

var $el1 = document.getElementById('el1');
var $el2 = document.getElementById('el2');
var $elText1 = document.getElementById('J_el1');
var $elText2 = document.getElementById('J_el2');
var posText1 = '元素el1: getBoundingClientRect信息:' + $el1.getBoundingClientRect().top + '<br />' +
  '元素el1: offsetTop:' + $el1.offsetTop;

var posText2 = '元素el2: getBoundingClientRect信息:' + $el2.getBoundingClientRect().top + '<br />' +
  '元素el2: offsetTop:' + $el2.offsetTop;

$elText1.innerHTML = posText1
$elText2.innerHTML = posText2