本文详细介绍了CSS中的定位概念，包括static、relative、absolute和fixed四种定位模式，强调了绝对定位与固定定位的特点。文章还探讨了定位如何影响display属性，以及z-index的堆叠顺序。此外，提供了使绝对定位和固定定位盒子居中的方法，并通过案例展示了各种定位的实际应用。
基本概念
css布局的三种机制分别为标准流、浮动、定位。
定位主要的作用是将盒子固定在浏览器某一固定位置。
设置了定位的盒子是漂浮在标准流和浮动盒子的上面的。
定位=定位模式+边偏移
边偏移用top bottom left right属性来表示。
定位模式
position:static(静态) || relative(相对定位) || absolute(绝对定位) || fixed(固定定位);
static静态定位
默认值，就相当于标准流，一般不用。
relative相对定位
如果子盒子设置相对定位，那么以父盒子为参照物移动。
这个过程发生了两件事情，一是设置相对定位的子盒子发生位移(废话)，二是它原先的位置是还保留着的，后面的标准流盒子不会“取而代之”。
例：
在不设置定位的情况下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
margin: auto;
width: 200px;
height: 200px;
background-color: hotpink;
border: 1px solid black;
}
.son1 {
width: 100px;
height: 100px;
background-color: greenyellow;
}
.son2 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
给son1设置相对定位之后，可以看到son1相对父盒子发生位移，但是它原先的位置空出来了，没有对后面的标准流son2产生位置上的影响：
.son1 {
position: relative;
top: 50px;
left: 10px;
width: 100px;
height: 100px;
background-color: greenyellow;
}
absolute绝对定位
绝对定位的情况要分类讨论：
在父级盒子(包括父盒子、爷爷盒子、太爷爷盒子…)设置了定位的情况下，就以离它最近的有定位的父级盒子为参照物进行移动。如果子盒子设置绝对定位，那么父盒子最好设置相对定位，即子绝父相，因为相对定位不会影响后面盒子的位置，所以子绝父相的搭配使得布局更加合理易控。
如果父盒子没有设置定位，那么就以浏览器文件为参照物进行移动。
注意：设置了绝对位移的盒子是不占有原先位置的，后面的盒子会跟上来占据它原有的位置。
例：
父盒子设置定位的情况下，son1相对父盒子发生位移，后面的son2跟上来填补son1的位置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
margin: auto;
width: 200px;
height: 200px;
background-color: hotpink;
border: 1px solid black;
}
.son1 {
position: absolute;
top: 50px;
left: 10px;
width: 100px;
height: 100px;
background-color: greenyellow;
}
.son2 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
父盒子没有定位的情况下，son1就是参照浏览器文件发生位移的，son2上移占据son2的位置。
.father {
/*position: relative;*/
margin: auto;
width: 200px;
height: 200px;
background-color: hotpink;
border: 1px solid black;
}
fixed固定定位
设置了固定定位的盒子在视野中是固定的位置，比如导航栏等，随着屏幕的滑动，固定盒子在视野中的位置是不变的。这个盒子不受父盒子的影响，只以屏幕中的视野位置为准。
例：
son1固定在浏览器的视野中，离上边50px，离左边10px，随着进度条的滚动，它在我们视野中的位置一直没有变化。
* {
margin: 0;
padding: 0;
}
.father {
margin: auto;
width: 200px;
height: 2000px;
background-color: hotpink;
border: 1px solid black;
}
.son1 {
position: fixed;
top: 50px;
left: 10px;
width: 100px;
height: 100px;
background-color: greenyellow;
}
.son2 {
width: 100px;
height: 100px;
background-color: yellow;
}
拓展
使绝对/固定定位的盒子居中
对于设定了绝对定位或者固定定位的盒子，margin: auto;是不起作用的。
想要让盒子在视野中水平居中，分为两步，第一步使盒子在视野中距离左边边距为浏览器视野一半的宽度，即left: 50%，这样做会使盒子偏右了盒子的一半宽度，所以就要把盒子往左移盒子的一半宽度，margin-left: -盒子的一半宽度
例：
第一步：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
top: 0;
left: 50%;
width: 500px;
height: 100px;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
第二步：
.header {
position: fixed;
top: 0;
left: 50%;
margin-left: -250px;
width: 500px;
height: 100px;
background-color: hotpink;
}
注意：如果想让固定盒子的宽度为整个视野，可以设置width: 100%;；
在使用相对定位和固定定位时，如果盒子里面是空的，需要指定宽度；
堆叠顺序(z-index)
设置了定位的盒子，可能会出现重叠现象，默认是后来居上的.我们可以通过设置堆叠顺序z-index: 0||正整数||负整数;来控制他们的优先显示顺序。默认值为0，数值越大越优先显示。
例：
没有设置堆叠顺序的盒子，是后来居上的，写在后面的盒子会在最上层。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.blue,
.red,
.green {
width: 100px;
height: 100px;
}
.blue {
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
.red {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
}
.green {
position: absolute;
top: 40px;
left: 40px;
background-color: green;
}
</style>
</head>
<body>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
</body>
</html>
可以通过设置堆叠顺序改变他们的优先显示顺序：
.blue {
position: absolute;
z-index: 1;
top: 0;
left: 0;
background-color: blue;
}
.red {
position: absolute;
z-index: 0;
top: 20px;
left: 20px;
background-color: red;
}
.green {
z-index: -1;
position: absolute;
top: 40px;
left: 40px;
background-color: green;
}
定位改变display属性
关于块级元素，行内元素，行内块元素先复习一下：
display可以对元素模式进行转换。
实际上我们发现，行内块元素是不能紧密贴合的，它们之间会有缝隙。而设置浮动可以解决这个问题。
css的三种布局机制分别为标准流、浮动、定位。
浮动的主要作用就是可以一行内显示多个块级元素，从这个角度来看，设置浮动就相当于给块级元素转换了display属性使之变成行内块元素。但是区别在于，设置了浮动的元素可以紧密贴合，不像行内块那样会留有空隙。并且设置浮动的元素是不占有实际位置的，后面的标准流元素会占据它的位置，所以一般我们会给浮动元素外面套一个标准元素，这样布局不会乱。
定位的主要作用是固定元素的位置。定位是在标准流和浮动的上面的。设置绝对定位和固定定位的元素和浮动类似，不占有标准流上的位置，一行可以多个。
盒子可能会出现 外边距合并，设置了浮动和定位的盒子是没有这个问题的。
案例
实现这张图片的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { /*清除元素的默认边距*/
margin: 0;
padding: 0;
}
li { /*清除列表的默认样式*/
list-style: none;
}
.photo {
margin: auto; /*设置盒子水平居中*/
position: relative; /*子绝父相*/
width: 300px;
height: 100px;
background-color: grey;
}
.former,
.latter {
width: 15px;
height: 30px;
background-color: hotpink;
}
.former {
position: absolute;
top: 50px;
margin-top: -15px;
left: 0px;
}
.latter {
position: absolute;
top: 50px;
margin-top: -15px;
right: 0px;
}
.circle {
position: absolute;
left: 150px;
margin-left: -40px;
bottom: 5px;
background-color: hotpink;
width: 80px;
height: 20px;
}
.circle li {
float: left;
width: 10px;
height: 10px;
background-color: #fff;
margin: 5px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="photo">
<a href="#" class="former"></a>
<a href="#" class="latter"></a>
<ul class="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
