position: fixed 定位的特性：
- 元素脱离正常文档流，不占位
- 始终相对于浏览器窗口四个角为原点进行固定定位的
- 不会随页面的内容滚动而滚动
- 如果没有定位偏移属性，对元素本身有影响
- 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
offsetLeft和offsetTop（相对于父级的偏移量）
只读属性，返回当前元素与父辈元素之间的距离（不包括边框）。其中父辈元素的取法依下面的规则： (1). 若父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素的距离 (2). 若父辈元素中没有定位元素，那么就返回相对于body的距离 (3). 若当前元素具有固定定位(position:fixed;)，那么返回的是当前元素与可视窗口(一般是浏览器窗口)的距离
offsetWidth/offsetHeight（不包含margin）
返回当前元素的宽度和高度（content+padding+border）不包含margin
clientWidth/clientHeight（不包括border和margin的元素大小）
返回当前元素的宽度和高度（content+padding）
scrollWidth/scrollHeight 滚动的距离
scrollWidth和scrollHeight：内容+内边距+溢出。当无溢出时，和clientWidth和clientHeight相等。
scrollLeft/scrollTop
scrollTop：表示纵向滚动的高度 scrollLeft：表示横向滚动的距离
innerWidth/innerHeight
innerHeight 返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度 innerWidth 返回窗口的文档显示区的宽度，如果有水平滚动条，也包括滚动条高度
outerHeight/outerWidth
outerHeight 属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条 outerWidth 属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动
getBoundingClientRect()
返回值为 { top, bottom, left, right, width, height, x, y }
top: 元素的顶部到窗口顶部（视窗顶部）的距离
bottom: 元素的底部到窗口顶部（视窗顶部）的距离
left: 元素的左侧边到窗口左边（视窗左边）的距离
right: 元素的右侧边到窗口左边（视窗左边）的距离
width: 元素的宽度
height: 元素的高度
x: 元素左上角到视窗左边的距离
y: 元素左上角到视窗顶部的距离
测试代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="a" style="width:400px;height:400px;margin:100px auto 0;background-color: red; border: 5px solid #333; overflow: auto;">
<div id="b" style="position:relative;width:600px;height:600px;margin:100px auto 0;background-color: blue;">
<div id="c" style="position: fixed;width:50px;height:50px;top:200px;left: 200px;background-color: green;"></div>
<div id="d" style="position: absolute;top:50px;left: 50px;height:100px;width:100px;background-color: yellow">
<div id="e" style="width:50px;height:50px;margin:25px auto 0;background-color: darkred;"></div>
</div>
</div>
<!-- <div id="f" style="width: 200px; height: 200px; margin: 100px auto; background-color: blanchedalmond;"></div> -->
</div>
<script>
let a = document.getElementById("a");
let b = document.getElementById("b");
let c = document.getElementById("c");
let d = document.getElementById("d");
let e = document.getElementById("e");
// let f = document.getElementById("f");
console.log('offsetWidth', a.offsetWidth)
console.log('offsetWidth', c.offsetWidth)
console.log('clientWidth', a.clientWidth)
a.addEventListener('scroll', () => {
console.log(a.scrollLeft, 'scrollLeft')
console.log(a.scrollTop, 'scrollTop')
console.log(b.offsetLeft, 'b.offsetLeft') // 不会随着滚动位置改变而发生改变
})
console.log("e:" + e.offsetLeft, e.offsetTop); // e: 25,25。以具有绝对定位的父辈元素d为参照
console.log("d:" + d.offsetLeft, d.offsetTop); // d: 50,50。以其相对定位的父元素b为参照
console.log("c:" + c.offsetLeft, c.offsetTop); // c: 200,200。以可视窗口为参照
console.log("b:" + b.offsetLeft, b.offsetTop); // b: 520(到浏览器窗口左边),205(到浏览器窗口顶部)。以body为参照
console.log("a:" + a.offsetLeft, a.offsetTop); // a: 515,100。以body为参照
console.log(c.getBoundingClientRect())
// console.log(f.getBoundingClientRect())
</script>
</body>
</html>
