目录
十、定位属性
我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。
跟背景定位区分开来，背景定位是给背景设置定位，不会出现在盒子之外，而这里的定位属性是给元素整体定位。
概念
定位属性 position
属性名：position
属性值：
relative 相对定位
absolute 绝对定位
fixed 固定定位
作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。
偏移量属性
定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。
水平方向：left、right。
垂直方向：top、bottom。
属性值：常用 px 为单位的数值，或者百分比。
1. 相对定位
属性值：relative
参考元素：标签加载的原始位置。
必须搭配偏移量属性才能发生位置移动。
性质
相对定位的性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占
有的位置。（所以脱离标准流的方法中没有相对定位）
元素显示效果上，原位留坑，形影分离。
注意事项
① 偏移量属性的值是区分正负的
正数:表示偏移方向与属性名方向相反。
负数:表示偏移方向与属性名方向相同。
② 同一个方向，不能设置两个偏移量属性
如果水平方向同时设置了left 和right属性，只会加载left属性。垂直方向只加载top属性。
建议:书写时从水平方向和垂直方向各挑一个属性进行组合。
③ 由于相对定位的参考元素是自身，left 的正值等价于right的负值，top 的正值等价于bottom的负值。
为了方便记忆，可以选择只使用left、top 组合。
想让元素去原始位置的右边，就是left：正值，去原始位置的左边就是left：负值
想让元素去原始位置的下边，就是top：正值，去原始位置的上边就是top：负值
实际应用
1.由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。
2. 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。
应用1：导航栏位置微调
鼠标移上时盒子变成黄色：
<style>
*{
margin: 0;
padding: 0;
}
.nav {
list-style: none;
width: 980px;
height: 50px;
margin: 100px auto;/*上下100，左右居中*/
}
.nav li {
float: left;
width: 180px;
height: 50px;
}
.nav li a {
display: block;
width: 180px;
height: 50px;
font: 15px/50px "微软雅黑";/*行高等于盒子高度可以垂直居中*/
text-align: center;
text-decoration: none;/*清除下划线*/
background-color: skyblue;
}
.nav li a:hover {
background-color: yellow;/*鼠标移上时盒子变成黄色*/
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</body>
现在不想让鼠标移上时变黄色了，想让鼠标移上时上面出现一个小块且盒子本身位置不变
想让盒子位置不变，就可以用相对定位
<style>
.nav li a:hover {
position: relative;
top: -5px;/*数值与边框宽度一样，被挤下去多少就向上调多少*/
border-top: 5px solid green;
}
</style>
这个盒子实际占的位置还是之前的位置，只不过相对定位在视觉效果上帮我们微调了
应用2：文字位置微调
文字标注参考文献的上标
<style>
*{
margin: 0;
padding: 0;
}
p {
width: 300px;
border: 2px solid greenyellow;
font: 18px/32px "宋体";
text-indent: 2em;/*首行缩进两个中文字符*/
}
span {
font-size: 12px;
position: relative;
top: -5px;
}
</style>
</head>
<body>
<p>这是一个段落<span>[1]</span>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
</body>
2. 绝对定位
属性值：absolute
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考<body>。
必须搭配偏移量属性才会发生位置移动。
绝对定位的性质
性质：绝对定位的元素脱离标准流，会让出标准流位置（下面的标准流就可以跑过来占有它的位置），可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
注意事项
注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。
注意2：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。
<body> 为参考元素的参考点
以<body>为参考元素时，参考点的确定与偏移量方向有关。
第一，如果有 top 参与的定位，参考点就是 <body> 页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。即上面例子
第二，如果有 bottom 参与的绝对定位，参考点是 <body> 页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
页面向下滑动后绿色块不会跟着下来，因为参考的是“首屏”的右下顶点。
实际应用中，如果以 <body> 为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用 <body> 作为参考元素。（实际工作中尽量不要使用）
祖先级为参考元素
如果祖先级中有定位的元素，就不会去参考<body>。
参考元素:参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先。
现在有四个盒子嵌套：
用黄色盒子的绝对定位进行演示：
黄色盒子想要绝对定位，首先要有一个有定位的祖先元素，给最外层红色盒子设置任意一个定位：
注意一下要找最近的祖先元素：
根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。
祖先元素参考点
如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。
left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。
right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角。
left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角。
right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角。
3. 固定定位
属性值：fixed
参考元素：浏览器窗口
参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置。
固定定位性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: aqua;
margin-bottom: 10px;
}
.backup {
position: fixed;
left: 150px;
top: 100px;
width: 100px;
height: 50px;
background-color: antiquewhite;
font: 18px/32px "微软雅黑";
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" class="backup">顶部</a>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>无论页面如何滑动，灰色小块位置不变：
 |  |
4. 定位应用
定位 position 根据属性值不同有三种类型的定位效果，其中绝对定位和固定定位的元素会脱离标准流，相对定位维持原样保持不变。三种定位在页面中有各自的使用场景。
前面重点看过相对定位的使用场景（导航栏微调和文字位置微调），先看重点看一下绝对定位和固定定位的使用场景：
压盖效果
所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。
现在场景：
一个div盒子里有一个图片和一个粉盒盒子
给外面的盒子box设置 position: relative;相对定位，然后给里面的盒子设置绝对定位，就可以实现粉色盒子压盖在图片上。而且粉色盒子会让出原来的位置，不会继续撑父盒子：
<style>
*{
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 800px;
border: 10px solid red;
}
.box p{
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<img src="image/ceshi.jpg">
<p></p>
</div>
</body>
居中
之前讲过小盒子在大盒子里居中，限制比较多，现在可以使用定位的方式进行设置，这种方法适用性更普遍。
定位的元素，如果想在参考元素中居中显示，有自己的居中方法：
第一步：在居中的方向使用一个偏移量属性，例如水平居中选择 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。
百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度。
此时粉色盒子的左边线在盒子中间，而我们想要的是粉色盒子的中线在盒子中间。
第二步：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半。
相当于将粉色盒子向左拽自身宽度的一半，即可让粉色盒子的中线与大盒子的中线重合。
<style>
*{
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 800px;
border: 10px solid red;
}
.box p{
position: absolute;
left: 50%;
margin-left: -50px;
top: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<img src="image/ceshi.jpg">
<p></p>
</div>
</body>
注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。使用更加场景广泛。
扩展应用
①解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位（标准流），利用相对定位居中的方法进行居中。
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 400px;
height: 100px;
border: 10px solid red;
margin: 50px auto;
}
.box1 p{
position: relative;/*不改变这个盒子标准流的性质*/
left: 50%;
margin-left: -400px;
width: 800px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<p></p>
</div>
</body>
②浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。
压盖顺序
实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。
默认压盖顺序
定位的元素不区分定位类型，不管是相对定位还是绝对固定，都会去压盖标准流或浮动的元素。
如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位。
因此，书写代码时，需要注意压盖效果，必须合理设置 HTML 元素的书写顺序。
自定义压盖顺序
如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性。
属性值：数字。
①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
④父子盒模型中，如果父子盒子都进行了定位，这组父子盒子与其他的父子盒子之间有压盖的部分：
父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。
子级盒子：如果父级没有设置z-index属性，子级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>
*{
margin: 0;
padding: 0;
}
.father{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border: 10px solid red;
}
.son{
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 150px;
background-color: pink;
}
.fuqin{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border: 10px solid greenyellow;
}
.erzi{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="fuqin">
<div class="erzi"></div>
</div>
</body>
</html>因为后写的压盖先写的，所以第二组的绿父亲和蓝儿子压盖住了第一组的红父亲粉儿子
父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。
子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了
z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。 （只要父亲值大，就会带着自己儿子压盖其他父子）
十一、综合案例：轮播图静态结构布局
首先分析一下轮播图的结构及使用的标签：
多张图片都是在原位置消失然后下一张图在原位置显示，所以肯定是用定位进行制作，图片以及按钮都是使用定位制作，可以在外面设置一个大盒子作为参考元素，使用绝对定位制作。
然后开始写代码，搭建整体架构：
<body>
<!-- 轮播图大结构 -->
<div class="lunbo">
<!-- 图片部分 -->
<ul class="pic">
<li><img src="image/lunbo/c1.jpg"></li>
<li><img src="image/lunbo/c2.jpg"></li>
<li><img src="image/lunbo/c3.jpg"></li>
<li><img src="image/lunbo/c4.jpg"></li>
<li><img src="image/lunbo/c5.jpg"></li>
<li><img src="image/lunbo/c6.jpg"></li>
</ul>
<!-- 按钮 -->
<div class="btn">
<!-- 防止a标签跳转 -->
<a href="javascript:;" class="leftbtn"><</a>
<a href="javascript:;" class="rightbtn">></a>
</div>
<!-- 小圆点 -->
<ol class="sub">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</body>接下来首先清除默认样式：
<style>
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
li,ol{
list-style: none;
}
</style>接下来设置外面的大盒子的属性：
写css代码时一般先将定位或者浮动的写在最前面，这样就知道下面可不可以写盒模型属性，写完盒模型属性然后写背景属性，最后写文字属性，一般这么写，条理清晰方便后期修改。
<style>
.lunbo {
position: relative;
width: 880px;/*图片的宽高是880*550，所以这里大盒子宽高也这么设置 */
height: 550px;
border: 1px solid black;
margin: 20px auto;/*居中*/
}
</style>接下来设置轮播图片的属性：
<style>
.lunbo .pic li{
position: absolute;
left: 0;
top: 0;
width: 880px;
height: 550px;
}
</style>
这里只显示了第六张图片，是因为后写的压盖住了先写的，所以最后只有最后写的第六张图片；左右按钮和小圆点也消失了，是因为绝对定位会让出标准流位置，下面的按钮和圆点就跑到上面被图片压盖住了。
为了解决这个问题，使用z-index设置压盖顺序
首先让其他的li都消失只显示一个，给所有li设置一个公共样式：display:none;使其全部消失，然后保留一个使其显示，给要显示的li标签添加一个类名：current，然后给这个类单独设置为display:block;。接下来轮播的时候其实就是让这个current去换，显示哪张图片哪张图片的li就是current。
现在设置好了只让一张图片显示，接下来设置按钮的css属性：
因为左右定位只能单独给左右按钮分别设置，所以先设置公共样式再设置单独样式
<style>
/* 设置按钮的公共样式 */
.lunbo .btn a{
position: absolute;
top: 50%;
margin-top: -20px;/*竖直方向居中*/
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.3);/*半透明*/
font:20px/40px "宋体";
text-align: center;
color: aliceblue;
text-decoration: none;/*清除下划线*/
font-weight: bold;
}
/*设置按钮的单独样式*/
.lunbo .btn .leftbtn{
left: 20px;
}
.lunbo .btn .rightbtn {
right: 20px;
}
/*设置鼠标移到按钮上时颜色加深*/
.lunbo .btn a:hover{
background-color: rgba(255, 255, 255, 0.6);/*鼠标移上时颜色加深*/
}
</style>设置下标小圆点的css属性：
<style>
}
/*下标小圆点*/
.lunbo .sub {
position: absolute;
left: 50px;
bottom: 30px;
width: 240px;
}
.lunbo .sub li {
float: left;/*在一排*/
width: 20px;
height: 20px;
margin-right: 20px;
background-color: rgba(255, 255, 255, 0.4);
font: 12px/20px "微软雅黑";
text-align: center;
color: grey;
cursor: pointer;/*光标移上时变成小手状态*/
}
.lunbo .sub .current{
background-color: white;
}
</style>最终完整代码：
<!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;
}
li,ol{
list-style: none;
}
.lunbo {
position: relative;
width: 880px;/*图片的宽高是880*550，所以这里大盒子宽高也这么设置 */
height: 550px;
border: 1px solid black;
margin: 20px auto;/*居中*/
}
.lunbo .pic li{
position: absolute;
left: 0;
top: 0;
width: 880px;
height: 550px;
display: none;/*图片都消失*/
}
.lunbo .pic .current {
display: block;/*唯独它显示*/
}
/* 设置按钮的公共样式 */
.lunbo .btn a{
position: absolute;
top: 50%;
margin-top: -20px;/*竖直方向居中*/
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.3);/*半透明*/
font:20px/40px "宋体";
text-align: center;
color: aliceblue;
text-decoration: none;/*清除下划线*/
font-weight: bold;
}
/*设置按钮的单独样式*/
.lunbo .btn .leftbtn{
left: 20px;
}
.lunbo .btn .rightbtn {
right: 20px;
}
/*设置鼠标移到按钮上时颜色加深*/
.lunbo .btn a:hover{
background-color: rgba(255, 255, 255, 0.6);/*鼠标移上时颜色加深*/
}
/*下标小圆点*/
.lunbo .sub {
position: absolute;
left: 50px;
bottom: 30px;
width: 240px;
}
.lunbo .sub li {
float: left;/*在一排*/
width: 20px;
height: 20px;
margin-right: 20px;
background-color: rgba(255, 255, 255, 0.4);
font: 12px/20px "微软雅黑";
text-align: center;
color: grey;
cursor: pointer;/*光标移上时变成小手状态*/
}
.lunbo .sub .current{
background-color: white;
}
</style>
</head>
<body>
<!-- 轮播图大结构 -->
<div class="lunbo">
<!-- 图片部分 -->
<ul class="pic">
<li class="current"><img src="image/lunbo/c1.jpg"></li>
<li><img src="image/lunbo/c2.jpg"></li>
<li><img src="image/lunbo/c3.jpg"></li>
<li><img src="image/lunbo/c4.jpg"></li>
<li><img src="image/lunbo/c5.jpg"></li>
<li><img src="image/lunbo/c6.jpg"></li>
</ul>
<!-- 按钮 -->
<div class="btn">
<!-- 防止a标签跳转 -->
<a href="javascript:;" class="leftbtn"><</a>
<a href="javascript:;" class="rightbtn">></a>
</div>
<!-- 小圆点 -->
<ol class="sub">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</body>
</html>
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
