一、定位
1.1 网页常见布局方式
1.标准流
- 块级元素独占一行 ->垂直布局
- 行内元素/行内块元素一行显示多个 ->水平布局
2.浮动
-
可以让原本垂直布局的块级元素变成水平布局
3.定位
-
可以让元素自由的摆放在网页的任意位置
-
一般用于盒子之间的层叠情况
1.2 定位的常见应用场景
1、可以解决盒子与盒子之间的层叠问题
- 定位之后的元素层级最高，可以层叠在其他盒子上面
2、可以让盒子始终固定在屏幕中的某个位置
2.1 定位初体验
1.需求：页面中两个盒子，要求完成图片的效果，可以如何完成
- 针对于盒子与盒子之间的层叠问题，推荐使用定位完成
2.2 使用定位的步骤
1.设置定位方式
属性名：position
常见属性值：
| 定位方式 | 属性值 |
|---|---|
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
2.设置偏移值
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
- 选取的原则一般是就近原则（离哪边近用哪个）
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+px | 距离下边的距离 |
3.1 静态定位
介绍：静态定位是默认值，就是之间认识的标准流
代码： position:static;
注意点：
- 静态定位就是之前的标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
4.2 相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position:relative;
特点：
- 需要配合方位属性实现移动
- 相对于自己原来位置进行移动
- 在页面中占位置 ->没有脱标
错了 是左边。。。。。。。。。。。。。。。。。。。。。。。。。。。
应用场景：
- 配合绝对定位组CP（子绝父相）
- 用于小范围的移动
5.1 绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：position:absolute;
特点：
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置 ->已经脱标
应用场景：
- 配合相对定位组CP（子绝父相）
5.2 绝对定位到底相对于谁进行偏移
绝对定位相对于谁移动？
- 祖先元素中没有定位 -->默认相对于浏览器进行移动
- 祖先元素有定位-->相对于 最近的 有定位 的祖先元素进行移动
6.1 子绝父相介绍
场景：让子元素相对于父元素进行自由移动
含义：
- 子元素：绝对定位
- 父元素：相对定位
子绝父相好处：
- 父元素是相对定位，则对网页布局影响最小
（拓展补充）子绝父绝特殊场景
场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可
原因：
- 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
（案例）卡片模块的hot图标定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f4f5f9;
}
.box {
/* 父相 */
position: relative;
width: 228px;
height: 270px;
background-color: #fff;
margin: 100px auto;
}
.box .product {
width: 228px;
width: 100%;
}
.box h3 {
height: 52px;
/* background-color: pink; */
padding-left: 24px;
padding-right: 20px;
margin-top: 25px;
font-size: 14px;
font-weight: 400;
}
.box p {
margin-left: 24px;
font-size: 12px;
color: #929292;
}
.box p span {
color: #f77321;
}
.hot {
/* 子绝 */
position: absolute;
right: -4px;
top: 4px;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/hot.png" class="hot">
<img src="../img/product.png" class="product">
<h3>Android网络图片加载框架详解</h3>
<p><span>高级</span>• 1125人在学习</p>
</div>
</body>
</html>
6.3 子绝父相水平居中案例
需求：使用子绝父相，让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）
步骤：
- 子绝父相
- 先让子盒子往右移动父元素宽度的一半
- left: 50%;
- 再让子盒子往左移动子元素宽度的一半
- 普通做法：margin-left:负的子盒子宽度的一半 缺点：子盒子宽度变化后需要重新改代码 margin-left取值的百分比相对于父元素
- 优化做法：transform:translateX(-50%); 优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
6.5 子绝父相水平垂直都居中案例
需求：使用子绝父相，让子盒子在父盒子中水平垂直都居中（父子元素任意宽高下都实现）
步骤：
- 子绝父相
- left:50%;
- top:50%;
- transform:translate(-50%,-50%);
（案例）导航二维码居中定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 40px;
border-bottom: 1px solid #ccc;
}
ul {
list-style: none;
width: 1200px;
margin: 0 auto;
background-color: red;
}
ul li {
float: left;
width: 20%;
height: 40px;
border-right: 1px solid #ccc;
box-sizing: border-box;
text-align: center;
line-height: 40px;
}
ul li:last-child {
border-right: 0;
}
ul li a {
/* 为了让用户可点击的范围更大，点击整个框就可以跳转而不是点击文字，所以给a
标签设置了高度和宽度，转换成块元素 */
display: block;
height: 40px;
/* background-color: red; */
text-decoration: none;
color: #000;
}
.nav .app {
position: relative;
}
.nav .app .code {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 40px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">我要投资</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#" class="app">手机微金所<img src="../img/code.jpg" class="code"></a></li>
<li><a href="#">个人中心</a></li>
</ul>
</div>
</body>
</html>
（案例）底部半透明遮罩效果案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1226px;
height: 600px;
/* background-color: pink; */
margin: 0 auto;
background: url('../img/bg.jpg');
position: relative;
}
.mask {
/* 本来块元素不设置宽度默认是父元素的宽度，但是设置了绝对定位之后，子元素就不再具有标准流的特性，会脱标，宽高默认由内容撑开，不再显示宽度，因此不设置宽度，子盒子不会显示出来 */
/* width: 1226px; */
width: 100%;
height: 150px;
background-color: rgba(0, 0, 0, .7);
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="mask"></div>
</div>
</body>
</html>
注意点：定位的元素会脱标（如：绝对定位），脱标后的元素宽高默认由内容撑开
7.1 固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position:fixed;
特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置->已经脱标
应用场景：
- 让盒子固定在屏幕中的某个位置
8.1 元素层级问题
不同布局方式元素的层级关系：
- 标准流 < 浮动 < 定位
不同定位之间的层级关系
- 相对、绝对、固定默认层级相同
- 此时HTML中写在下面的怨怒是层级更高，会覆盖上面的元素
8.2 更改定位元素的层级
场景：改变定位元素的层级
属性名：z-index
属性值：数字
- 数字越大，层级越高
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
