position的属性,以及使用场景选择

发布时间 2023-10-07 20:38:55作者: Ly021

1,position:static;
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

2,position:fixed;
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:

3,position:relative;
相对定位元素的定位是相对其正常位置。
移动相对定位元素,但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

4,position:absolute;
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于< html>:
absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素和其他元素重叠。