在HTML中有许多如图片等的DOM元素,在网页下拉移动中,DOM元素的位置定位通常通过 position
属性来完成
在一般情况下我们DOM元素的默认position
的值为 static
除此之外position
还拥有
相对定位 relative
相对定位即可控制DOM相对于自己原来位置进行定位
可通过如 left: 50px
如此来调节
绝对位置 absolute
absolute的特性是不会为此元素预留空间,即原本DOM元素下方的元素会向上占住原本DOM元素的位置,类似于网页新开了一个图层的效果。
absolute的定位是以相对于元素最近的非static定位祖先元素的偏移来确定元素位置。
固定定位 fixed
fixed原理很简单,就是讲DOM元素固定在整个页面某一位置不会随着下拉页面而改动,类似一个图层放置在那里。
可以利用如 right:50px
等来调节位置
粘性定位 sticky
这个简单说就是当页面下拉到DOM元素到达了设定的位置,DOM元素将不会再随下拉移动,效果如页面内图片
顺便一提,如前面所说,网页存在类似图层一说,具体图层的上下关系往往通过 z-index
来表示 z-index
越大元素越在上层