概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用。边偏移加定位定位模式才能构成一个完整的定义方式。
偏移量说明:
边偏移属性 描述
top: 顶端偏移,定义元素相对于其父元素上边线的距离
bottom: 底部偏移,定义元素相对于其父元素下边线的距离
left: 左侧偏移,定义元素相对于其父元素左边线的距离
right: 右侧偏移,定义元素相对于其父元素右边线的距离
定位模式的分类
值 描述
static 自动定位(默认定位方式)
relative 相对定位,相对于其元文档流的位置进行定位
absolute 绝对定位,相对于其上一个已经定位的父元素进行元素定位
fixed 固定定位,相对于浏览器窗口进行对位
一、静态定位
是所有元素的默认定位方式,当position属性的取值为static,可以将元素设置为静态,也就是各个元素在html中默认的位置,其实就是标准流的意思
对边偏移无效,一般用来清除定位
二、相对定位
position:relative
1.相对对位最重要的一点是它可以通过边偏移移动位置,但是原来的所占位置继续占有。
2.其次,每次移动的位置是,自己在左上角为基点移动 (相对自己来移动)
相对对位的盒子仍然在标准流中,它后面的盒子仍然以标准流的方式对待它(相对定位不脱标)
三、绝对定位
position: absolute
绝对定位可以通过边偏移量移动位置,但是完全脱标,完全不占位置
父级没有定位
如果父元素没有定位,孩子以浏览器为基准对齐
绝对定位是根据最近的定位(绝对、相对、或者固定)的父元素(祖先)进行定位
一般会结合相对定位使用 (子绝父相)
加了绝对定位的盒子设置margin 左右auto不会生效
解决水平的方法:先设置盒子left: %50 然后margn-left: 盒子的负一半
left: 50%;
margin-left: -50px;
水平居中也是同样的原理
top:50%;
margin-top: -20px; 另一种完美的写法:transform: translateX(-50%);
四、固定定位
position: fixed;
固定定位也是完全脱标的特性
固定定位的盒子一定要写宽和高,除非有内容撑开的不用写
以浏览器为基点
五、叠放层次z-index
当对多个元素同时设置定位时,定位元素之间有可能发生重叠
可以通过优先级来解决
注意点:
1. z-index的默认值是0,取值越大,定位元素在层叠元素中越居上
2. 如果取值相同,则根据书写顺序,后来者居上
3. 后面数字一定不能加单位
4. 只有相对定位,绝对对位,固定定位由此属性,其余标准流,,浮动,静态无此属性
六、定位的模式转换
当元素添加了相对定位和绝对定位,元素模式也会转换成行内块
(浮动的盒子会转换成行内块,没给宽度的情况下 以内容撑开宽度)
如果盒子本身就需要添加浮动后者绝对固定定位就不需要转换了