文章目录
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
静态定位
静态定位(position:static)/默认的文档流布局
- 块级元素按照书写顺序从上往下依次排列
- 行内/行内块元素按照书写顺序从左到右依次排列，一行放不下才换行
- 文档流中的元素都是紧密排布的，没有大的空隙，且没有堆叠现象
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>静态定位</title>
<style>
.box {
width: 350px;
height: 350px;
background-color: rgb(199,237,204);
}
.box2 {
width: 200px;
height: 200px;
background-color: #e8e8e8;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="box2">box2</div>
</body>
</html>
相对定位
相对定位(position:relative)
- 不会脱离文档流，不会释放布局空间
- 定位参照物：自己作为静态定位元素时的位置
- 可以使用top/bottom/left/right修改自己的位置
- 可能会出现堆叠现象，可以使用z-index调整层级
- 用途 1：微调自己的位置
- 用途 2：为使用绝对定位的后代元素提供定位参照物
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style>
.box {
width: 350px;
height: 350px;
background-color: rgb(199,237,204);
position: relative;
top:50px;
}
.box2 {
width: 200px;
height: 200px;
background-color: #e8e8e8;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="box2">box2</div>
</body>
</html>
当给box元素设置top属性值为50px时：
绝对定位
绝对定位(position:absolute)
1) 会脱离文档流，释放布局空间
2) 定位参考物：离自己最近的具有非静态定位属性的祖先元素，会逐级向上找，终点是html
所以我们可以使用"自绝父相"，但若父级有非静态定位属性，就不用专门加了
3) 可以使用top/bottom/left/right修改自己的位置
4) 可能会出现堆叠现象，可以使用z-index调整层级
5) 用途：在页面上覆盖到其他元素上方的指定位置
脱离文档流演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style>
* {
margin: 0;
}
.fu {
width: 350px;
height: 350px;
background-color: rgb(199,237,204); /* 设置为半透明,方便看到底部覆盖到的元素 */
position: relative;
top: 30px;
left: 50px;
}
.zi {
width: 200px;
height: 200px;
background-color: #e8e8e8;
position: absolute;
top: 60px;
left: 80px;
}
.zi2 {
width: 200px;
height: 220px;
background-color: red;
}
</style>
</head>
<body>
<div class="fu">
<div class="zi">zi</div>
</div>
</body>
</html>
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style>
* {
margin: 0;
}
.fu {
width: 350px;
height: 350px;
background-color: rgb(199,237,204);
position: relative;
top:30px;
left: 50px;
}
.zi {
width: 200px;
height: 100%;
background-color: #e8e8e8;
}
.zi2 {
width: 200px;
height: 220px;
background-color: red;
}
</style>
</head>
<body>
<div class="fu">
<div class="zi">zi</div>
<div class="zi2">zi2</div>
</div>
</body>
</html>
修改一下代码将zi2元素改为p元素：
这里需要注意的是：通过上图也可以看到 当zi2元素的width和height明确指定了的前提下，若同时设置top:0和bottom:0，生效的只有top:0；同理同时设置的left:0和right:0，生效的只有left:0;
若没有给zi2元素设置width，那么在绝对定位下，其同时设置left:0和right:0；zi2元素的宽会扩展到fu元素的整个宽度。
若没有给zi2元素设置height，那么在绝对定位下，其同时设置top:0和bottom:0；zi2元素的高度会扩展到fu元素的整个高度。
当父块级元素的位置设置为相对定位，子块元素的位置设置为绝对定位，top/bottom/left/right都设置为0，margin设置为auto;
可实现子块级元素在父元素中，水平居中且垂直居中。
可以看到此时的margin:auto;不仅在水平方向均分外间距生效，垂直方向上也进行了均分外间距且生效，从而实现块级子元素水平和垂直方向居中显示。
固定定位
固定定位(position:fixed)
1) 会脱离文档流，释放布局空间
2) 定位参照物: html根元素，但网上说的是浏览器窗口或者viewport(界面视口)
3) 可以使用top/bottom/left/right修改自己的位置
4) 可能会出现堆叠现象，可以使用z-index调整层级
5) 用途:制作覆盖整个窗口的遮罩层,
主要用于将元素固定在浏览器窗口的某个位置，无论页面如何滚动，该元素都会保持在视口的固定位置不变。
以下是 position: fixed 的一些主要使用场景：
固定导航栏：最常见的使用场景之一是将网站的导航
代码在day09code/p5.html里，需要的，可以私信。
效果如下：
