一、定位属性position
前面我们已经了解过布局相关的盒模型、浮动等属性,而定位是另一种布局的重要属性,常用于制作压盖或者位置相关的效果。
属性名:position
属性值:relative 相对定位 absolute 绝对定位 fixed 固定定位
作用:设置定位的元素,它需要根据某个参考元素发生位置的偏移。
二、偏移量属性
定位的元素要想发生位置的移动,必须搭配偏移量属性进行设置。
水平方向:left、right。
垂直方向:top、bottom。
属性值:常用 px 为单位的数值,或者百分比。
三、相对定位
属性值:relative,相对的意思。 参考元素:标签加载的原始位置。 必须搭配偏移量属性才能发生位置移动。
1.相对定位的性质
相对定位的元素不脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置。 元素显示效果上,记忆口诀:原位留坑,形影分离。
2.相对定位的注意事项
注意①:偏移量属性的值是区分正负的。 正数:表示偏移方向与属性名方向相反。 负数:表示偏移方向与属性名方向相同。例如:left:-100px,它是向左进行偏移,所以和单词left左的意思一样。
注意②:同一个方向,不能设置两个偏移量属性,如果水平方向同时设置了 left 和 right 属性,只会加载 left 属性。垂直方向只加载 top 属性。 建议:书写时从水平方向和垂直方向各挑一个属性进行组合。
注意③:由于相对定位的参考元素是自身,left 的正值等价于 right 的负值,top 的正值等价于 bottom 的负值。 为了方便记忆,可以选择只使用 left、top 组合。
四、定位的实际应用案例
1. 由于相对定位元素比较稳定,不会随意让出位置,可以将相对定位的元素作为后 期绝对定位的参考元素,就是所说的子绝父相情况。
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>定位的实际应用案例</title>
<style>
body,ul,li,a{
margin: 0;
padding: 0;
}
.nav {
list-style: none;
width: 900px;
height: 50px;
margin: 50px auto;
font: 20px/50px "微软雅黑";
background-color: #f00;
}
.nav li {
float: left;
width: 150px;
height: 50px;
}
.nav li a {
display: block;
width: 150px;
height: 50px;
background-color: skyblue;
text-decoration: none;
text-align: center;
}
.nav li a:hover {
position: relative;
left: 0;
top: -3px;
border-top: 3px solid #f00;
background-color: #0f0;
}
</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>
<li><a href="#">首页</a></li>
</ul>
</body>
</html>
五、绝对定位
属性值:absolute,绝对的意思。 参考元素:参考的是距离最近的有定位的祖先元素,如果祖先都没有定位,参考 <body>。 必须搭配偏移量属性才会发生位置移动。
示例1:当我们没有设置偏移属性,它就会自己让出自己的位置,脱离文档流
示例2:当我们设置了偏移属性,没有设置相对定位,它是相对于Body进行偏移的。
示例3:当我们设置了偏移属性,也设置相对定位了,它是相对于设置了相对定位的父元素进行偏移的。
绝对定位的性质
性质:绝对定位的元素脱离标准流,会让出标准流位置,可以设置宽高,也可以随时定义位置,绝对定位的元素不设置宽高只能被内容撑开。 注意1:绝对定位的参考元素是不固定的,不同的参考元素以及不同的偏移量组合, 会导致绝对定位元素的参考点不同,具体位移效果不同。 注意2:在绝对定位中,由于参考点不同,left 正值不再等价于 right 的负值。
<body> 为参考元素的参考点
以 <body> 为参考元素时,参考点的确定与偏移量方向有关。 第一,如果有 top 参与的定位,参考点就是 <body> 页面的左上顶点和右上顶点。自 身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。 第二,如果有 bottom 参与的绝对定位,参考点是 <body> 页面首屏的左下顶点或 右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。 实际应用中,如果以 <body> 为参考元素,不同分辨率的浏览器中,绝对定位的元 素位置是不同的,所以较少使用 <body> 作为参考元素。
祖先级为参考元素
如果祖先级中有定位的元素,就不会去参考 <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>祖先级为参考元素</title>
<style>
body,div,p {
margin: 0;
padding: 0;
}
.box1 {
position: relative;
width: 600px;
height: 600px;
padding: 10px;
border: 10px solid #f00;
}
.box2 {
position: absolute;
width: 400px;
height: 400px;
padding: 10px;
border: 10px solid #0f0;
}
.box3 {
position: fixed;
width: 200px;
height: 200px;
padding: 10px;
border: 10px solid #00f;
}
p {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p></p>
</div>
</div>
</div>
</body>
</html>
根据绝对定位的参考元素的定位类型不同,有三种定位组合方式:子绝父相、子绝父绝、子绝父固,由于相对定位的祖先级位置更稳定,大多使用子绝父相的情况,也可以说成是父相子绝。
祖先元素参考点
如果绝对定位的参考元素是某个祖先级,参考点是盒子 border 以内的四个顶点,组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离,会忽视参考元素的 padding 区域。 left、top:参考点是祖先的 border 以内的左上顶点,对比点是盒子自身的左上角。 right、top:参考点是祖先的 border 以内的右上顶点,对比点是盒子自身的右上角。 left、bottom:参考点是祖先的 border 以内的左下顶点,对比点是盒子自身的左下 角。right、bottom:参考点是祖先的 border 以内的右下顶点,对比点是盒子自身的右下角。
六、固定定位
属性值:fixed,固定的意思。 参考元素:浏览器窗口。 参考点:浏览器窗口的四个顶点。跟偏移量组合方向有关。 由于浏览器窗口的四个顶点位置不会发生变化,会导致固定定位的元素会始终显示在定位位置。
适用场景:常用于制作网页回到顶部按钮
<!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>css定位—固定定位</title>
<style>
div {
width: 300px;
height: 300px;
background-color: skyblue;
margin-top: 20px;
}
a {
position: fixed;
right: 100px;
bottom: 100px;
width: 100px;
height: 50px;
background-color: #0f0;
font: 20px/50px "微软雅黑";
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">回到顶部</a>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
固定定位的性质
固定定位的元素脱离标准流,让出标准流位置,可以设置宽高,根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。
七、定位应用
定位 position根据属性值不同有三种类型的定位效果,其中绝对定位和固定定位的元素会脱离标准流。 三种定位在页面中有各自的使用场景
1.压盖效果
所有的定位类型都可以实现压盖效果。 由于绝对定位的元素脱标,不占标准流位置,压盖效果更彻底,实际工作中,常见的是绝对定位制作的压盖。
2.居中效果
定位的元素,如果想在参考元素中居中显示,有自己的居中方法:
第一步:在居中的方向使用一个偏移量属性,例如 left,设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。 百分比形式的属性值,百分百参考的是参考元素的 border 以内的宽度、高度。
<!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>css-压盖效果</title>
<style>
.box {
position: relative;
width: 300px;
height: 300px;
border: 10px solid #000;
}
p {
position: absolute;
left: 50%;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box">
<img src="images/hat.png" alt="">
<p></p>
</div>
</body>
</html>
第二步:给绝对定位的子盒子设置一个同方向的 margin,例如 margin-left,属性值 为负的自身宽度的一半。
注意:不论子盒子的宽度是否比参考元素更宽,都能使用以上方法进行居中设置。
扩展应用
①解决标准流中,宽的子盒子在窄的父盒子中的居中,可以设置大的子盒子相对定位,利用相对定位居中的方法进行居中。
②浮动的元素居中,在不改变原始浮动状态情况下,可以利用相对定位居中方法。
八、压盖顺序
实际使用定位时,可能出现多个定位的元素加载到同一个位置的情况,这时候压盖的顺序是可以控制的。
1.默认压盖顺序
定位的元素不区分定位类型,都会去压盖标准流或浮动的元素。 如果都是定位的元素,在 HTML 中后写的定位压盖先写的定位。 因此,书写代码时,需要注意压盖效果,必须合理设置 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>css层叠z-index</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
position: relative;
top: -200px;
width: 150px;
height: 150px;
background-color: #f00;
}
.box3 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: #0f0;
}
.box4 {
position: fixed;
left: 0;
top: 0;
width: 50px;
height: 50px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
2.自定义压盖顺序z-index 属性
如果想更改定位的元素的压盖顺序,可以设置一个 z-index 属性。 属性值:数字。
3.自定义压盖顺序注意事项
①属性值大的会压盖属性值小的,设置z-index属性的会压盖没有设置的。例如给其中一个盒子设置z-index的属性值为1,那么其他的盒子没有设置z-index属性,他会将加了z-index属性的盒子显示再最外层。
②如果属性值相同,比较HTML书写顺序,后写的压盖先写的。这里参考的是HTML标签元素的熟书写顺序,而不是css的书写顺序。
③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>css层叠z-index</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
position: relative;
top: -200px;
width: 150px;
height: 150px;
background-color: #f00;
}
.box3 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
z-index: 2;
background-color: #0f0;
}
.box33 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: pink;
}
.box4 {
position: fixed;
left: 0;
top: 0;
width: 200px;
height: 200px;
z-index: 1;
background-color: #00f;
}
.box5 {
position: fixed;
left: 0;
top: 0;
width: 50px;
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3
<div class="box33">box33</div>
</div>
<div class="box4">box4
<div class="box5">box5</div>
</div>
</body>
</html>