定位的语法
.blue {
/* 定位的使用步骤 */
/* 1 设置定位的方式 绝对定位*/
position: absolute;
/* 2 设置偏移值 */
top: 150px;
left: 150px;
background-color: blue;
}
静态定位
position: static;
特点:
1 静态定位就是普通的标准流
2 静态定位设置偏移值无效.
相对定位
position: relative;
特点:
1 需要配合方位属性来移动位置
2 想对于自身原来的位置进行移动
3 在页面中占位置-没有脱标
绝对定位
position: absolute;
特点
1 需要配合方位属性来移动位置
2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,相对于最近一级带有定位的祖先元素移动位置.
3 在页面中不占位置-已经脱标
子绝父相
子绝父相:
子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.
子绝父绝:
实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可.
绝对定位的盒子水平垂直居中
普通做法:
/* 1 让子盒子移动父元素的一半(往右) */left: 50%;
/*让子盒子移动父元素的一半(往下) */
top: 50%;
/* 2 在让子盒子往左移动自身宽度的一半 使用margin负值 */
/* 普通做法 */
margin-left: -150px;
/* 在让子盒子往上移动自身高度的一半 使用margin负值 */
margin-top: -100px;
优化做法:
/* 1 让子盒子移动父元素的一半(往右) */
left: 50%;
/*让子盒子移动父元素的一半(往下) */
top: 50%;
/* 2 在让子盒子往左移动自身宽度的一半 使用margin负值 */
/* 优化做法 就业班第一天课会讲 */
transform: translate(-50%, -50%);
固定定位
position: fixed;
特点
1 需要配合方位属性来移动位置
2 相对于浏览器的可视区域进行移动位置
3 不占位置-脱标
定位的特殊性
行内元素加了绝对/固定定位可以设置宽高
块级元素加了绝对/固定定位,如果不给宽度,宽度由内容撑开
嵌套块级元素加了绝对/固定定位,不会有塌陷问题.
元素层级
不同布局方式元素的层级关系：
标准流 <浮动 <定位
定位元素之间的层级关系相同(相对定位 绝对定位 固定定位)
z-index属性可以修改定位元素之间的层级关系
z-index: 数字(默认值是auto );
z-index属性的属性值千万不要加单位
数字越大,层级越高.只有定位的盒子才有 z-index属性
示例代码:
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
}
.red {
/* 相对定位 */
position: relative;
left: 0;
top: 0;
z-index: 2;
background-color: red;
}
.blue {
/* 绝对定位 */
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
background-color: blue;
}
.green {
/* 固定定位 */
position: fixed;
left: 200px;
top: 200px;
z-index: 9999;
background-color: green;
}
