CSS:绝对定位和相对定位
CSS定位一直以来都是创建网页布局很重要的一部分。尽管有一些新的CSS布局例如Flexbox和CSS Grid出现。定位依旧在任何一个网页设计者的布局技巧中占有着重要的位置。
- static (静态)
- absolute (绝对)
- relative (相对)
- fixed (固定)
静态定位(Static)
静态是任何一个元素在网页上的默认位置。如果你不定义一个元素的定位,那么它就是静态的。意味着它在屏幕上的显示方式基于HTML的标准文档流,也就是元素在HTML文档中的默认位置。
如果你应用定位规则(例如 top或left)在一个拥有静态定位的元素上。这个规则会被忽略,而元素将会按照它在HTML标准文档流出现的方式出现。你将会很少需要设置元素的定位为静态,因为它是默认选项。
静态定位这样书写:
position:static;
以下是示例网页(H5标准):
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style>
*{margin: 0;padding: 0}
#a{width: 200px;height: 200px;background-color: red;}
#b{width: 200px;height: 200px;background-color: green;}
#c{width: 200px;height: 200px;background-color: blue;}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>
将块A的定位设置为静态:
#a{position:static;width: 200px;height: 200px;background-color: red;}
可以看到网页布局无变化:
绝对定位(Absolute)
绝对定位可能是最容易理解的CSS定位。绝对定位这样书写:
positon:absolute;
这个值告诉浏览器,这个元素将会被移出标准文档流而不是放置在页面的确定位置。然后这个元素计算定位时将会匹配与它最近的父级非静态元素。因为一个绝对定位的元素被移出了标准文档流,它只影响在网页中这个元素出现之前和之后的元素定位。
举个例子,如果你有一个div元素用了相对定位。那么在这个DIV的内部,如果你想放置一个段落在距离这个div顶部50像素的距离,你需要为这个元素的position属性添加一个值:absolute 以及添加一个属性top并为它赋初值50px。
position:absolute;
top:50px;
我们看一看示例网页,为块B添加一个子元素B_1,先设置块B为相对定位,然后设置B_1为绝对定位,并给top属性的值设置为50像素:
CSS:
#b{position: relative;width: 200px;height: 200px;background-color: green;}
#b_1{position: absolute;top:50px;width: 100px;height: 100px;background-color:black;}
HTML:
<div id="b">
<div id="b_1"></div>
</div>
可以看到位置的变化:
这个绝对定位元素将会始终距离相对定位的DIV块的顶部50像素,无论在标准文档流的其他元素元素如何显示。你的绝对定位元素需要使用相对定位的一个元素作为它的父级元素,你设置的值是相对于这个元素而定位的。
你能够使用的四个定位属性是:
-
top(顶部)
-
right(右边)
-
bottom(底部)
-
left(左边)
你只能对一个元素使用top和bottom中的一个属性,因为一个元素不能基于同方向的两个属性值来定位。
(同理,你也只能使用right和left中的一个)
如果一个元素设置了绝对定位,但是它没有非静态的父级元素,那么它将相对于页面中最高级别的元素
body元素来定位。
我们设置div元素a为绝对定位并设置距离左边为50像素,a的没有已经定义的父级元素:
(为了方便展示,这里我们为div元素b设置了不透明度50%)
#a{position:absolute;left:50px;width: 200px;height: 200px;background-color: red;}
可以看到设置a元素距离页面最左边为50像素生效,而此时页面中块元素的上下顺序被打乱。原因是:a元素设置绝对定位后被移出标准文档流,所以不再按照HTML文档中的元素出现顺序排列。
相对定位(Relative)
相对定位使用了类似绝对定位的四个定位属性。但是与绝对定位基于最近的非静态父级元素相比,相对定位元素的位置取决于它本来在标准文档流中应该出现的位置。
举个例子,如果你在你的网页中有三个段落,第三个有position:relative的样式。那么它的新位置将取决于它当前的位置。
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p style="position: relative;left: 2em;">Paragraph 3.</p>
在以上的例子中,设置相对定位的第三个段落距离父容器的左边为2em,但仍然在两个段落的下方。它与标准文档流中与其他元素并列。如果你将它的定位属性调整为position;absolute,那么任何在它之后的元素都会显示在它上方,因为这个段落已经不在标准文档流中。(对照上个章节最后的一部分)
假设在示范网页中我们设置div元素b的为相对定位且相对当前位置的左边为50像素:
CSS
#b{position: relative;left:50px;width: 200px;height: 200px;background-color:green;}
效果:
因为相对定位符合标准文档流,所以div元素b之后的元素并没有显示在它的上方。
在网页中的元素常常应用position:relative属性,而不对它设置任何定位值。意味着这个元素将会确切地出现在它在标准文档流应该出现的位置。
如果独立地对一个元素设置这个属性,意味着这个元素是可以作为其他元素绝对定位的环境。例如一个网页设计中的一个常见的场景,你想将一个div元素作为你网页的container,那么这个div元素就可以设置relative 属性,这样任何在这个div元素中的元素都可以将它作为定位环境。
固定定位(Fixed)
固定定位更像绝对定位一些。设置固定定位的元素计算位置时和绝对定位模型相仿,但是固定的元素就这么被固定在浏览器窗口上了(像水印一样),页面上滚动的所有元素都将经过这个元素。
为了使用这个属性值,你需要先设置:
position:fixed;
请记住,如果你在你的网站上固定了一个元素,那么它将始终出现在你刷新的页面的那个位置。举个例子,如果你的元素固定在了你网站的顶部,那么它将会出现在你每次刷新出的页面的顶部。
这里我们新增加一个div元素top并设置颜色为白色(不透明度50%),固定定位在距离顶部0像素的位置:
CSS
#top{position: fixed;top:0px;width:1000px;height: 100px;background-color:rgba(255,255,255,0.5)}
HTML
<div id="top"></div>
效果:
可以看得到,滚动网页时,顶部的白条位置不会发生改变(始终跟随浏览器窗口)。
原作者 By Jennifer Kyrnin:https://www.lifewire.com/absolute-vs-relative-3466208
翻译整理 By RainSilver https://rainsilver.github.io/blog