css定位

css中的定位属性

在css中较为常见的定位有:相对定位、绝对定位、固定定位

一、相对定位属性:position
1、static:默认值;没有定位;(可以用于取消元素之前的定位设置)
2、relative:相对定位 (参照物:自己所在的位置)
相对定位的特点:
1、如果没有定位偏移量,对元素本身没有任何影响
2、不使元素脱离文档流,空间是会被保留。
3、不影响其他元素布局
代码和效果如图:
css定位
css定位
二、 绝对定位属性: absolute
绝对定位的特点:
1、使元素完全脱离文档流
2、使内联元素支持宽高 (让内联具备块特性)
3、使块元素默认宽根据内容决定(让块具备内联的特性)
代码和效果如图:
css定位
css定位
三、固定定位属性: fixed
固定定位的特点:
1、使元素完全脱离文档流
2、使内联元素支持宽高 (让内联具备内联块特性)
3、使块元素默认宽根据内容决定(让块具备内联块的特性)
代码和效果如图:
css定位
css定位
当滚动条向上向下时,粉红色的盒子固定不会动,左侧的文字会随着滚动条一起动,顾名思义,这就是固定定位了。
今日分享到此结束啦 >.<