CSS布局-position属性:绝对定位和相对定位
position 属性规定应⽤于元素的定位⽅法的类型(static、relative、fixed、absolute 或 sticky)。
⼀、position:static;(静态)
默认情况下是静态定位,静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 始终根据页⾯的正常流进⾏定位;
⼆、position: relative;(相对定位)
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进⾏调整,相对于其正常位置进⾏定位。
三、position:absolute;(绝对定位)
相对于最近的定位祖先元素进⾏定位(⽽不是相对于视⼝定位,如 fixed),如果绝对定位的元素没有祖先,将使⽤⽂档主体(body),并随页⾯滚动⼀起移动。
例⼦:    绝对定位和相对定位区别
相对定位,相对⾃⼰原来本⾝的位置定位。
绝对定位,相对⽗级元素的位置进⾏定位。
四、position: fixed;(相对视⼝定位)
即使滚动页⾯,它也始终位于同⼀位置。 top、right、bottom 和 left 属性⽤于定位此元素。
例⼦:
css固定定位div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
四、position: sticky;(⽤户滚动位置进⾏定位)
粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视⼝中遇到给定的偏移位置为⽌ - 然后将其“粘贴”在适当的位置(⽐如 position:fixed)。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。