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;    粘滞定位元素
    不脱离文档流
    是相对定位和固定定位的一种结合，当没有超过阈值的时候为相对定位，超过阈值为固定定位。<style>
    .one{positon:static;}
</style>
<div class="one"></div>