一、CSS定位的概念
在我们浏览网页的过程中,经常会发现网页中的元素重叠展示,例如一个列表压在了一张图片之上,或者浏览器右下角突然弹出的广告压到了其他元素之上,这些都需要使用css的定位才能实现,现在我们就讲解css定位相关的属性,定位可以分为三类,
- 绝对定位
- 相对定位
- 固定定位
二、理解
我们可以通过position属性,将一个元素设置成定位元素,之后就可以通过top、left、bottom、right属性来设置元素的坐标。
1.绝对定位
绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。
将一个元素设置下面的属性:
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background-color: #f00;
border:1px solid #0f0;
}
.pos{
position: absolute; /*设置绝对定位元素*/
top:50px;
left:50px;
}
</style>
</head>
<body>
<!-- 一个元素可以设置多个class属性,用空格区分开 -->
<div class="box">1</div>
<div class="box pos">2</div>
<div class="box">3</div>
</body>
</html>
从上面代码的效果中,我们可以了解以下几点:
- 绝对定位元素脱离文档流,并不占位,第一个div和第三个div相邻。
- 原点在整个网页左上角的位置。
- 定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离最近的已定位的祖先元素的距离。
2.相对定位
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background-color: #f00;
border:1px solid #0f0;
}
.pos{
position: relative; /*设置相对定位元素*/
top:50px;
left:50px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box pos">2</div>
<div class="box">3</div>
</body>
</html>
从上面代码的效果中,我们可以了解以下几点:
- 相对定位元素不脱离文档流,元素占位,第一个div和第三个div不相邻,中间的间距就是相对定位元素的位置。
- 原点在其占位位置的左上角。
- 定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。
3.固定定位
相对于浏览器窗口进行定位,脱离原来的文档流
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height:1000px;
}
.box{
width:100px;
height:100px;
background-color: #f00;
border:1px solid #0f0;
}
.box2{
position: fixed; /*设置固定定位元素*/
top:50px;
left:50px;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</body>
</html>
从上面代码的效果中,我们可以了解以下几点:
- 固定定位元素脱离文档流,并不占位,第一个div和第三个div相邻。
- 我们将body元素的高度设置成1000px,这样我们就可以通过滚轮控制网页显示的位置。
- 原点在浏览器当前窗口的左上角。
- 定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。
- 当滑轮滚动的时候,固定定位元素永远相对于窗户的位置定位。
4.设置参照物
理解了上面三种定位方法,我们再来考虑开始提到的那个问题,如果我们希望将一个数字列表压在一张图片之上。居中显示在网页之上,我们将数字列表设置定位之后,坐标应该设置成多少呢?因为居中的图片与浏览器窗口的左边距是不固定的,所以没有办法设置成一个固定值,这个时候,我们就需要给定位元素设置参照物。
将父级元素设置定位元素,那么子级元素定位的坐标原点会设置为父级元素左上角的位置。代码如下所示。
代码如下(示例):
<div class="container">
<div class="box"></div>
</div>
.container{
width:300px;
height:300px;
border:1px solid blue;
position: relative;;
top:100px;
left:100px;
}
.box{
border:blue 4px solid;
width:100px;
height:100px;
position:absolute;
top:10px;
left:20px;
}
父级容器不管是绝对定位,相对定位还是固定定位,都可以实现作为参照物的效果,在实际项目开发中,常用方法(子绝父相)如下所示:
- 如果父级元素不脱离文档流,参与正常排版,那么父级设置相对定位。
- 如果父级需要根据视窗的显示位置而变化位置,可以设置固定定位。
- 一般父级容器不设置绝对定位。