一、将 position 设置为 absolute/fixed 元素的特点(中)
绝对定位元素定位参照对象的宽和高
首先先说结论,对于绝对定位元素来说有这样两个公式:
- 定位参照对象的宽度 =
绝对定位元素的实际占用宽度(自身的宽度 width)
+left
+right
+margin-left
+margin-right
- 定位参照对象的高度 =
绝对定位元素的实际占用高度(自身的高度 height)
+top
+bottom
+margin-top
+margin-bottom
根据这两个公式我们就可以实现垂直和水平居中。
非定位元素的居中
对于绝对元素及其定位参照对象来说,绝对定位元素
的参照元素
肯定是绝对定位元
素的父级元素
,首先创建一个 HTML 页面,包含两个嵌套的盒子,具体代码如下:
<!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>
.box {
width: 800px;
height: 300px;
background-color: #f00;
}
.box .container {
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="box">
<div class="container"></div>
</div>
</body>
</html>
在浏览器中打开该 HTML 页面,具体效果如下:
可以看到绿色盒子 div.container
是块级元素,默认会占据整行,给绿色盒子 div.container
设置宽度为 200px,具体代码如下:
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
}
刷新浏览器,效果如下:
现在有一个问题 – 如何让绿色的盒子居中?
要让绿色盒子居中,我们可以设置 margin: 0 auto;
来实现,具体代码如下:
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
margin: 0 auto;
}
刷新浏览器,效果如下:
此时绿色盒子已经居中了,为什么设置为 margin: 0 auto;
就居中了?
此时红色盒子和绿色盒子都没有设置定位,还不是定位元素,但是此时的公式如下:
红色盒子的宽度 = 绿色盒子宽度 + margin-left + margin-right
也就是说:
800 = 200 + auto + auto
此时 auto
自动分配的值为 300px,并且此时没有设置定位 left
和 right
都为 0,因此左右两个外边距相等,这就实现了居中。
定位元素水平居中
如果把红色盒子和绿色盒子设置为子绝父相的情况呢?
把 div.box
设置为 position: relative
;把 div.container
设置 position: absolute
,具体代码如下:
.box {
width: 800px;
height: 300px;
background-color: #f00;
position: relative;
}
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
/*先注释 margin*/
/*margin: 0 auto;*/
position: absolute;
}
刷新浏览器,效果如下:
此时绿色盒子已经是定位元素,我们就可以套用上面的公式了,定位参照对象 div.box
也就是红色盒子的宽度为 800px
就等于
绝对定位元素 div.container
也就是绿色盒子的自身宽度 200px
加上
值为 auto
的 margin-left
再加上
值为 auto
的 margin-right
再加上
偏移量 left
和 right
,公式如下:
div.box 的宽度 = div.container 的宽度 + left + right + margin-left + margin-right
此时我们设置 left: 0; right: 0
并且注释掉宽度 width
,具体代码如下:
.box .container {
/* width: 200px; */
height: 100px;
background-color: #0f0;
/* margin: 0 auto; */
position: absolute;
left: 0;
right: 0;
}
那么根据刚才的公式,会发生什么现象?
div.box 的宽度 = div.container 的宽度(auto) + 0 + 0 + 0 + 0
此时 div.container
的宽度就是父元素 div.box
的宽度,也就是 800px
,绿色盒子会占据父元素整行,刷新浏览器,效果如下:
此时子元素绿色盒子 div.container
就完全占据了父元素 div.box
的整行。
要想达到同样的效果我们可以设置子元素 div.container
的 width
为 100%
,具体代码如下:
.box .container {
/* width: 200px; */
height: 100px;
background-color: #0f0;
/* margin: 0 auto; */
width: 100%;
position: absolute;
/* left: 0; */
right: 0;
}
刷新页面,效果如下:
原理是一样的,都是同一个公式。
那么假如在绝对定位的情况下给一个绿色盒子 div.container
的宽度为一个指定的值,如 200px,具体代码如下:
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
/* margin: 0 auto; */
/* width: 100%; */
position: absolute;
left: 0;
right: 0;
}
此时的计算公式就是:
800 = 200 + 0 + 0 + 0 + 0
这肯定是不对的,所以默认情况下会把差的值 600px
给到 margin-right
,也跟原来所在的位置有一点关系,具体摆放位置由浏览器来决定,可能会给左边多一点也可能会给右边多一点。
刷新浏览器,效果如下:
在开发过程中我们要尽量不要让这种不确定性的代码出现,一定要写准确的代码,摆放位置由自己来决定,而不是让浏览器来决定。
还有一种情况就是如果设置 margin:0 auto;
并且在 left: 0; right: 0
的情况下,此时也可以水平居中,具体代码如下:
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
margin: 0 auto;
/* width: 100%; */
position: absolute;
left: 0;
right: 0;
}
刷新浏览器,效果如下:
此时的公式就是
800 = 200 + 0 + 0 + auto + auto
margin-left
和 margin-right
为 auto
的情况下,浏览器分配的具体的值为 300px
,实现了居中。
对于定位元素想要在它的包含块中居中,通过这样的方式来实现。