css-定位布局

定位布局

定位元素的特点:
    1.【绝对定位、固定定位】脱离文档流(1.宽高如果没有指定,由其内容决定;2.元素脱了文档流后不占据屏幕空间,其下面的块元素就会顶上来)
    2.所有定位元素都可以使用如下属性
    left/right/bottom/top
    3.position的取值决定了相对点
position:static;(非定位元素)

position:relative;    相对定位元素
    不脱离文档流
    相对于其当前所在位置
    一般情况下的相对定位不会让他发生移动,而是作为决定定位的参照物

position:absolute;    绝对定位元素
    脱离文档流
    相对于距离他最近的父定位元素(relative、absolute、fixed),如果所有父元素都不是定位元素,那么就相对于浏览器视口

position:fixed;    固定定位元素
    脱离文档流
    相对于浏览器视口
    不会随着浏览器的滚动而滚动
position:sticky;top:10px;    粘滞定位元素
    不脱离文档流
    是相对定位和固定定位的一种结合,当没有超过阈值的时候为相对定位,超过阈值为固定定位。
    

你可能感兴趣的:(前端,css)