定位---position
让元素在任意地方显示
元素的定位属性主要包括定位模式和边偏移。
边偏移
top 顶端偏移量,定义元素相对于其父元素上边线的距离
bottom 底部偏移量,定义元素相对于其父元素下边线的距离
left 左侧偏移量,定义元素相对于其父元素左边线的距离
right 右侧偏移量,定义元素相对于其父元素右边线的距离
也就说,以后定位要和边偏移搭配使用了, 比如 top: 100px; left: 30px;
定位
静态定位static 默认
一.相对定位relative(自恋型)---->相对定位不脱标,保留位置
1. 相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有。
2. 其次,每次移动的位置,是以自己的左上角为基点移动(相对于自己来移动位置)
二.绝对定位absolute(拼爹型)
--->绝对定位通过边偏移移动位置,但是它完全脱标,完全不占位置。
绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
重要:子绝父相(子级是绝对定位的话, 父级要用相对定位)
原因:因为子级是绝对定位,不会占有位置, 可以放到父盒子里面的任何一个地方。
父盒子布局时,需要占有位置,因此父亲只能是 相对定位.
绝对定位的盒子水平/垂直居中(重要)
普通的盒子是左右margin 改为 auto就可, 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中,有一个算法。
1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。
eg:绝对定位实现水平居中
.father{
width:300px;
height:400px;
background-color:pink;
position:relative;
}
.son{
width:100px;
height:50px;
background-color:green;
position:absolute;
left:50%;
margin-left:-50px;
}
<div class="father">
<div class="son"></div>
</div>
三.国定定位fixed(认死你型)
1. 固定定位的元素跟父亲没有任何关系,只认浏览器。
2. 固定定位完全脱标,不占有位置,不随着滚动条滚动。
叠放次序(z-index)
eg:z-index:2; z-index:999;
1. z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
2. 如果取值相同,则根据书写顺序,后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性。
四.定位元素转换
跟浮动一样,元素添加了绝对定位和固定定位之后,元素模式也会发生转换, 都转换为行内块模式,
行内块的宽度和高度跟内容有关系。因此 比如行内元素,如果添加了绝对定位或者固定定位后,浮动后,可以不用转换模式,直接给高度和宽度就可以了。
四种定位总结
定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
---|---|---|---|
静态static | 不脱标,正常模式 | 不可以 | 正常模式 |
相对定位relative | 脱标,占有位置 | 可以 | 相对自身位置移动(自恋型) |
绝对定位absolute | 完全脱标,不占有位置 | 可以 | 相对于定位父级移动位置(拼爹型) |
固定定位fixed | 完全脱标,不占有位置 | 可以 | 相对于浏览器移动位置(认死理型) |