DOM元素定位

• ， 16 2月 2021
• 作者 847954981@qq.com
• 前端学习, 我的编程之路

DOM元素定位

在HTML中有许多如图片等的DOM元素，在网页下拉移动中，DOM元素的位置定位通常通过 position 属性来完成

在一般情况下我们DOM元素的默认position的值为 static

除此之外position还拥有

• relative(相对定位)
• absolute(绝对定位)
• fixed(固定定位)
• sticky(粘性定位)

相对定位 relative

相对定位即可控制DOM相对于自己原来位置进行定位

可通过如 left: 50px 如此来调节

绝对位置 absolute

absolute的特性是不会为此元素预留空间，即原本DOM元素下方的元素会向上占住原本DOM元素的位置，类似于网页新开了一个图层的效果。

absolute的定位是以相对于元素最近的非static定位祖先元素的偏移来确定元素位置。

固定定位 fixed

fixed原理很简单，就是讲DOM元素固定在整个页面某一位置不会随着下拉页面而改动，类似一个图层放置在那里。

可以利用如 right:50px 等来调节位置

粘性定位 sticky

这个简单说就是当页面下拉到DOM元素到达了设定的位置，DOM元素将不会再随下拉移动，效果如页面内图片

顺便一提，如前面所说，网页存在类似图层一说，具体图层的上下关系往往通过 z-index 来表示 z-index 越大元素越在上层