CSS 定位
网页常见布局方式
网页常见布局方式
标准流
- 块级元素独占一行 -> 垂直布局
- 行内元素/行内块元素一行显示多个 -> 水平布局
浮动
- 原本垂直布局的块级元素变成水平布局
定位
- 可以让元素自由的摆放在网页的任意位置
- 一般用于盒子之间的层叠情况
- 让盒子固定在页面某一位置
使用定位
1.设置定位方式
属性名: position
定位方式 | 定位方式 |
---|---|
定位方式 | static |
相对定位 | relative |
相对定位 | absolute |
固定定位 | fixed |
2.设置偏移值
- 偏移值可以设置水平和垂直方向
- 选取原则:就近原则
3.偏移方向
- 水平距离左边 left
- 水平距离右边 right
- 垂直距离上边 top
- 垂直距离下边 buttom
相对定位
- 占有原来的位置
- 相对于自己之前的位置
- 不改变显示模式
position: relative
left: 100px;
top: 100px;
注:Tips: 如果 4 个定位都有,以 top 和 left 为准
绝对定位
- 相对于非静态定位的父元素定位
- 不占有原来的位置
- 改变显示模式
- 默认以浏览器 body 定位
position: absolue
left: 100px;
top: 100px;
- 子绝父相:父级相对定位,子级绝对定位
- 绝对定位查找父级的方法:逐级向上,最终是浏览器窗口
固定定位
positions: fixed;
特点:
- 脱标-不占位置
- 相对于浏览器定位
- 具备行内块特点
元素层级关系
1.不同布局方式元素的层级关系:
标准流 < 浮动 < 定位
2.同层级,后写的会覆盖在先写的元素
3.设置元素层级
/* 默认值0;数值越大,显示越靠前 */
z-index: 数值;
案例:子盒子在父盒子中
方式一:margin
<style>
.box-wrap {
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
}
.box {
position: absolute;
left: 50%;
top: 50%;
/* 手动计算盒子的一半 */
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<div class="box-wrap">
<div class="box"></div>
</div>
方式二:transform
<style>
.box-wrap {
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
}
.box {
position: absolute;
left: 50%;
top: 50%;
/* 移动自身一半 */
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<div class="box-wrap">
<div class="box"></div>
</div>
//pink占blue的居中位置