一、定位
定位：
定位是一种更加高级的布局手段。
通过定位可以将元素放在页面的任意位置。
position：通过position来设置定位。可选值:
static 默认值，元素是静止，没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
偏移量(offset):
1.当元素开启了定位以后，可以通过偏移量来设置定位的位置。
2.可选值
top: 定位元素到定位位置上边的距离，默认值 auto
bottom: 定位元素到定位位置下边的距离，默认值 auto
left: 定位元素到定位位置左边的距离，默认值 auto
right: 定位元素到定位位置右边的距离，默认值 auto
定位元素在垂直方向的位置由top、bottom两个属性控制，
通常情况下只需一个即可。
定位元素在水平方向的位置由left、right两个属性控制，
通常情况下只需一个即可。
1.1 相对定位
1）相对定位的特点
positon:relative
+++ 相对定位的特点:
1.相对定位它是参照于元素在文档流的位置进行定位的。
2.占位脱离文档流（实质上没有脱离）。它不会影响到其他元素在文档流中的位置。不会改变元素性质。
1.不设置偏移量，不会发生任何变化。
2.元素移动后依旧占据原有位置。
3.元素层次会被提高，可以遮盖其他元素。
4.不会改变元素性质。
2）案例
>>>>>> 不设置偏移量，不会发生任何变化
b2开启了相对定位，由于没有设置偏移量，所以不会发生任何变化。
<!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>
#b1{
width:100px;
height:100px;
background:blue;
}
#b2{
width:120px;
height:100px;
background:yellow;
position:relative;
}
</style>
</head>
<body>
<div id="b1">xx</div>
<div id="b2">ssss</div>
<div id="b3">333333333</div>
</body>
</html>
>>>>>> 相对定位相对于元素在文档流中的位置进行定位
b2开启相对定位
top:10px， 表示顶部距离元素原有位置10个像素。
<!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>
#b1{
width:100px;
height:100px;
background:blue;
}
#b2{
width:120px;
height:100px;
background:yellow;
position:relative;
top:10px;
}
</style>
</head>
<body>
<div id="b1">xx</div>
<div id="b2">ssss</div>
<div id="b3">333333333</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>
#b1{
width:100px;
height:100px;
background:blue;
}
#b3{
width:100px;
height:100px;
background:blue;
}
#b2{
width:120px;
height:100px;
background:yellow;
position:relative;
top:200px;
}
</style>
</head>
<body>
<div id="b1">xx</div>
<div id="b2">ssss</div>
<div id="b3">333333333</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>
#b1{
width:100px;
height:100px;
background:blue;
}
#b3{
width:100px;
height:100px;
background:blue;
}
#b2{
width:120px;
height:100px;
background:yellow;
position:relative;
top:20px;
}
</style>
</head>
<body>
<div id="b1">xx</div>
<div id="b2">ssss</div>
<div id="b3">333333333</div>
</body>
</html>
1.2 绝对定位
1）绝对定位的特点
position:absolute
+++ 绝对定位的特点:
1.绝对定位是相对于自己最近的且开启了定位的祖先元素进行定位。如果没有，则相对于根元素。
2.完全脱离文档流。它会影响到其他元素在文档流中的位置。且会改变元素性质。
1.开启绝对定位后，元素会从文档流中脱离。
它后面的元素会自动向上移动。
2.不设置偏移量,元素的位置不会发生任何变化。
但是元素的大小可能改变。
3.绝对定位会改变元素的性质。元素会转化为行内块元素。
4.元素层次会被提高，可以遮盖其他元素。
2）绝对定位是相对于绝对定位的包含块进行定位的
绝对定位是相对于距离元素最近的且开启了定位的祖先元素，
如果没有，则相对于根元素
绝对定位是相对于开启了定位的包含块进行定位的。
包含块：距离元素最近的祖先块元素。
如<div><span><em>11</em></span><div>
对于em来说，它的包含块是div，而不是span。
绝对定位的包含块：距离元素最近的且开启了定位的祖先元素。
3）叠罗汉（绝对定位的应用）
子元素在父元素中排列，
当子元素开启绝对定位后,子元素就会脱离文档流，后面的元素就会向上移动，然后又脱离文档流，依次循环。
这就是叠罗汉。
>>>>>> 未开启绝对定位
<!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>
.box1{
width:300px;
height:300px;
border:1px solid red;
margin:0px auto;
}
img{
width:300px;
height:300px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="box1">
<img src="img/1 (1).png">
<img src="img/1 (2).png">
<img src="img/1 (3).png">
</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>
.box1{
width:300px;
height:300px;
border:1px solid red;
margin:0px auto;
position: relative;
}
img{
width:300px;
height:300px;
vertical-align: bottom;
position: absolute;
}
</style>
</head>
<body>
<div class="box1">
<img src="img/1 (1).png">
<img src="img/1 (2).png">
<img src="img/1 (3).png">
</div>
</body>
</html>
4）案例
>>>>>> 绝对定位会改变元素的性质，将元素转化为行内块元素。
由案例1、案例2可知。
案例1:元素A原本为块级元素，由于没有设置宽高，则独占一行。
案例2:元素A开启了绝对定位，元素转化为了行内块元素，大小由内容撑开。
案例1：未开启绝对定位
<!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>
#b1{
width:100px;
height:100px;
background:blue;
}
#b2{
height:30px;
background:yellow;
}
</style>
</head>
<body>
<div id="b1">xx</div>
<div id="b2">ssss</div>
</body>
</html>
案例2：开启了绝对定位
<!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>
#b1{
width:100px;
height:100px;
background:blue;
}
#b2{
height:30px;
background:yellow;
position:absolute;
}
</style>
</head>
<body>
<div id="b1">xx</div>
<div id="b2">ssss</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>
#b1{
width:100px;
height:100px;
background:blue;
}
#b2{
width:100px;
height:100px;
background:yellow;
position:absolute;
}
#b3{
width:200px;
height:200px;
background:green;
}
</style>
</head>
<body>
<div id="b1">box1</div>
<div id="b2">box2</div>
<div id="b3">box3</div>
</body>
</html>
1.3 固定定位
1）固定定位的特点
position:fixed
固定定位的特点:
1.固定定位是一种特殊的绝对定位。
固定定位是相对于浏览器的视口进行定位。
固定定位的元素不会随着网页条滚动而滚动。类似于悬浮广告。
2.完全脱离文档流，它会影响到其他元素在文档流中的位置。且会改变元素性质。
1.开启固定定位以后，它后面的元素会向上移动。
2.固定定位会改变元素的性质，将元素转化为行内块元素。
2）案例
>>>>>> 固定定位完全脱离文档流，它后面的元素会自动向上移动
<!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>
#b1{
width:100px;
height:100px;
background:blue;
}
#b2{
width:100px;
height:100px;
background:yellow;
position:fixed;
}
#b3{
width:200px;
height:200px;
background:green;
}
</style>
</head>
<body>
<div id="b1">box1</div>
<div id="b2">box2</div>
<div id="b3">box3</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
1.4 粘滞定位
position:sticky
1.粘滞定位和相对定位的特点相同，但是不同的是粘滞定位到达某个位置后就会固定。
2.兼容性不好，IE完全不支持，所以不推荐使用。
二、恒等式
布局恒等式必须要满足，如果不满足，则称为过度约束。
2.1 基础恒等式
1）水平布局恒等式
水平布局恒等式:
左右外边距+左右内边距+左右border+width =父元素的宽度
1.可以设置auto值
1.只有width、margin可以设置auto值
2.width默认值为auto，margin默认值为0.
2.过度约束会自动调整。
1.在没有auto的情况下，默认调整margin-right。
2.在有auto的情况下，调整auto值。
1）只有width为auto,调整宽度为100%
2）只有margin为auto，平分。
3）width、margin为auto，调整width为100%。margin为0.
4）width固定,margin-left或margin-right调整为100%。
2）垂直布局恒等式
无垂直布局恒等式
2.2 绝对定位恒等式
1）绝对定位水平布局恒等式
绝对定位水平布局恒等式：
left+ margin-left + border-left + padding-left +width + padding-right +border-rihgt + margin-right +right = 包含块的宽度
【元素开启了绝对定位，则水平布局恒等式必须要加上left、right】
1.当我们开启了绝对定位，水平方向的恒等式必须添加left、right两个
要素，规则和之前相同。
2.可以设置auto值
左右定位（默认值为auto）、
左右外边距（默认值为0）、
width、height（默认值为auto）
3.过度约束会自动调整
1) 在没有auto的情况下，会自动调整right值。
2) 在有auto的情况下，根据auto优先级自动调整，只调优先级大的。
1.只有定位为auto，不动
2.只有width为auto，调整width为100%
3.只有margin为auto，平分
2）绝对定位垂直布局恒等式
绝对定位垂直布局恒等式:
上下定位 +上下外边距+上下padding+上下border+height=绝对定位包含块的高度
1.可以设置auto值
上下定位（默认值为auto）
上下margin（默认值为0）
width、height（默认值为auto）
2.过度约束会自动调整
1.如果没有auto，浏览器自动调整bottom。
2.如果有auto，则调整auto值。
1.只有定位为auto，不动
2.只有height为auto，调整height为100%
2.只有margin为auto，平分。
2.3 恒等式总结
1) 可以设置auto的属性
定位（默认值为auto）
元素宽（默认值为auto）
margin（默认值为0）
2) 恒等式总结
1.过度约束自动调整
1.如果没有auto，浏览器自动调整最右边、最下边的属性。
2.有auto，则根据auto优先级，只调整优先级最大的。
定位 > 宽 > margin
1)定位:
定位都有auto，不动;
有一个为auto，调整为100%。
2)宽:
调整为100%
3)margin:
margin都为auto,平分；
有一个为auto，调整为100%。
2.4 盒子居中（恒等式的而应用）
1) 盒子在父元素中居中
+++ 水平居中
#box{
width:200px;
margin:0 auto;
}
原理：根据水平布局恒等式，只有margin为auto，则左右平分，居中显示。
>>>>>> 水平居中
2）绝对定位盒子在包含块中居中
+++ 绝对定位盒子在包含块中水平居中
#box{
width:50px;
height:50px;
position:absolute;
left:0px;
right:0px;
margin-left:auto;
margin-right:auto;
}
原理：根据绝对定位水平布局恒等式，只调整优先级最大的。
设置定位为0，width固定，margin为auto。
+++ 绝对定位盒子在包含块中垂直居中
#box{
width:50px;
height:50px;
position:absolute;
top:0px;
left:0px;
margin-top:auto;
margin-bottom:auto;
}
>>>>>> 水平位置居中( 绝对定位元素在包含块中 )
<!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>
.b1{
width:500px;
height:500px;
background-color: red;
position:relative;
}
.b2{
width:50px;
height:50px;
background-color: blue;
position:absolute;
left:0px;
right:0px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="b1">
<div class="b2"></div>
</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>
.b1{
width:500px;
height:500px;
background-color: red;
position:relative;
}
.b2{
width:50px;
height:50px;
background-color: blue;
position:absolute;
/* left:0px;
right:0px;
margin-left:auto;
margin-right:auto; */
top:0px;
bottom:0px;
margin-top:auto;
margin-bottom:auto;
}
</style>
</head>
<body>
<div class="b1">
<div class="b2"></div>
</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>
.b1{
width:500px;
height:500px;
background-color: red;
position:relative;
}
.b2{
width:50px;
height:50px;
background-color: blue;
position:absolute;
left:0px;
right:0px;
margin-left:auto;
margin-right:auto;
top:0px;
bottom:0px;
margin-top:auto;
margin-bottom:auto;
}
</style>
</head>
<body>
<div class="b1">
<div class="b2"></div>
</div>
</body>
</html>
三、定位元素层级（z-index）
对于开启了定位的元素，可以通过z-index来设置层级。
z-index需要整数来作为参数，
1.值越大，层级越高，越优先显示。
2.祖先元素的z-index值再高，也不会盖住后代元素
>>>>>> 案例：z-index-值越大，层级越高，越优先显示
<!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>
.b1{
width:100px;
height:100px;
background-color: red;
position:absolute;
z-index: 100;
}
.b2{
width:100px;
height:100px;
background-color: blue;
position:absolute;
top:50px;
left:50px;
z-index: 80;
}
.b3{
width:100px;
height:100px;
background-color: yellow;
position:absolute;
top:100px;
left:100px;
z-index: 60;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</body>
</html>
>>>>>> 案例：祖先元素的z-index值再高，也不会盖住后代元素
<!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>
.b1{
width:100px;
height:100px;
background-color: red;
position:absolute;
z-index: 100;
}
.b2{
width:100px;
height:100px;
background-color: blue;
position:absolute;
top:50px;
left:50px;
z-index: 80;
}
.b3{
width:100px;
height:100px;
background-color: yellow;
position:absolute;
top:100px;
left:100px;
z-index: 60;
}
.b4{
width:70px;
height:70px;
background-color:green;
position:relative;
z-index: 10;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3">
<div class="b4"></div>
</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:0px;
padding:0px;
list-style: none;
}
.imglist{
width:600px;
height:500px;
margin:100px auto;
position: relative;
}
.imglist li{
position:absolute;
}
.imglist li:nth-child(1){
z-index: 9999;
}
.imglist li img{
width:600px;
height:500px;
}
.pointer{
position:absolute;
z-index:100000;
top:92%;
}
.pointer span{
width:20px;
height:20px;
background-color:rgb(255,223,221);
float:left;
border-radius: 50%;
margin-left:15px;
}
.pointer span:hover{
background-color:rgba(255,223,221,.5);
}
</style>
</head>
<body>
<ul class="imglist">
<li><a href="javascript:;"><img src="https://img14.360buyimg.com/pop/s1180x940_jfs/t1/159967/27/11894/100648/6048bd81E76f8ec74/d432aac0150a4eb8.jpg.webp" /></a></li>
<li><a href="javascript:;"><img src="https://img30.360buyimg.com/pop/s1180x940_jfs/t1/159445/2/9493/92575/603f401bE5f43a75d/3eec111747b38615.jpg.webp" /></a></li>
<li><a href="javascript:;"><img src="https://img20.360buyimg.com/pop/s1180x940_jfs/t1/127284/36/969/66667/5eb8bb59Ed1aacfbd/c471b14dfd219abe.jpg.webp" /></a></li>
<div class="pointer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
