css之position

关于positon的几种定位

1. static:默认值
2. innert:继承
3. relative:相对定位
4. absolute:绝对定位
5. fixed:固定定位
6. sticky：粘性布局

position:relative

• 相对地位
• 不影响元素本身的特性
• 不使元素脱离文档流，即：元素移动之后原始位置会被保留
• 提升层级

html

<div id = 'test1'></div>
<div id = 'test2'></div>
<div id = 'test3'></div>

css

#test1{
    width: 100px;
    height: 100px;
    background: bisque;
}
#test2{
    width: 100px;
    height: 100px;
    top: 20px;
    background: bisque;
    position: relative;
    left: 20px;
}
#test3{
    width: 100px;
    height: 100px;
    background: bisque;
}

效果图

position:absolute

• 使元素完全脱离文档流
• 使内嵌支持宽高
• 块属性标签内容撑开宽度
• 若有定位父级，则相对于父级发生偏移。若没有定位父级，则相对于document发生偏移
• 提升层级

html

<div id = 'test1'></div>
<div id = 'test2'></div>
<div id = 'test3'></div>

css

#test1{
    width: 100px;
    height: 100px;
    background: bisque;
}
#test2{
    width: 100px;
    height: 100px;
    top: 20px;
    background: bisque;
    position: absolute;
    left: 20px;
}
#test3{
    width: 100px;
    height: 100px;
    background: bisque;
}

效果图

position:sticky

• 粘性定位
• 结合了absolute和relative的定位
• 元素会先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
• 常用场景：当元素距离页面视口顶部距离大于0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。
  html:

<div id = 'test'>
</div>

css

#test{
    width: 800px;
    height: 50px;
    background: cadetblue;
    position: sticky;
    top: 100px;
}