css定位 场景
当我们需要一个元素在某个盒子内移动位置,并且压住其他盒子
当滚动条滚动时,某个元素保持不动
定位组成
将盒子定在某个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子
定位= 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式 。边偏移则决定了该元素的最终位置
定位模式() 值语义
静态定位
相对定位
绝对定位
fixed
固定定位
边偏移
left right top
边偏移属性描述
top
顶端偏移量,定义元素相对于其父元素上边线的距离
底部偏移量,定义元素相对于其父元素下边线的距离
left
左侧偏移量,定义元素相对于其父元素左边线的距离
right
右侧偏移量,定义元素相对于其父元素右边线的距离
文章插图
在使用定位的时候需要和边偏移一起使用,否则就跟没有使用定位一个效果,一动不动
静态定位(了解)
静态定位是元素的默认定位方式,无定位的意思
{position:static;}
相对定位(重要)
相对定位是元素在移动位置的时候,是相对于他原来的位置来说的(自恋型)
{position:relative}
特点(重要):
>div{border: 1px solid ;margin: 2px;}.container{height: 200px;width: 200px;}.container div{height: 50px;width: 50px;}
- CSS定位详解
- 定位是什么,元素怎么显示隐藏
- element-ui 封装页面步骤导航定位条
- 车辆导航定位方法
- Web自动化之页面元素定位---Xpath
- CSS中的 “var” 和 “:root”
- postgresql定位分析消耗CPU高的SQL语句
- 北风网 html5入门教程,HTML5+CSS3零基础快速入门
- 综合管廊UWB人员定位系统
- AirTag是什么?高精度测距定位防丢,UWB厘米级方案应用