期待的——为什么它移动到底部和右边,但我们指定顶部和左边? 听起来不合逻辑,但这只是相对定位工作的方式——你需要考虑一个看不见的力,推动定位的盒子的一侧,移动它的相反方向。 所以例如,如果你指定 top: 30px;
一个力推动框的顶部,使它向下移动30px。
绝对定位
绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下:
position: absolute;
如果你现在保存和刷新,你应该看到这样:
首先,请注意,定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经关闭在一起,就像它不再存在!好吧,在某种程度上,这是真的。绝对定位的元素不再存在于正常文档布局流中。相反,它坐在它自己的层独立于一切。这是非常有用的——这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 ——例如弹出信息框和控制菜单,翻转面板,可以在页面上的任何地方拖放的UI功能等。
第二,注意元素的位置已经改变——这是因为top
,bottom
,left
和right
以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离,而不是指定元素应该移入的方向。 所以在这种情况下,我们说的绝对定位元素应该位于从“包含元素”的顶部30px,从左边30px。
注意:您可以使用top
,bottom
,left
和right
如果需要,调整元素大小。 尝试设置 top: 0; bottom: 0; left: 0; right: 0;
和 margin: 0;
对你定位的元素,看看会发生什么! 之后再回来。
注意:是的,外边距仍会影响定位的元素。 然而,外边距折叠不会。
定位上下文
哪个元素是绝对定位元素的“包含元素”? 默认情况下,它是<html>
元素——定位的元素是被嵌套在<body>
中的HTML源代码,但在最终的布局,它离页面边缘的顶部和左侧30px距离,这是<html>
元素。 这更准确地称为元素的定位上下文。
我们可以改变定位上下文——绝对定位的元素相对于其定位的元素。 这是通过在元素的其他祖先之一上设置定位来实现的——它是嵌套在其中的元素之一(你不能相对于其中没有嵌套的元素来定位它)。 为了演示这一点,将以下声明添加到您的body规则中:
position: relative;
这应该给出以下结果:
定位的元素现在相对于<body>
元素。
介绍 z-index
所有这些绝对定位很有趣,但还有另一件事我们还没有考虑到 ——当元素开始重叠,什么决定哪些元素出现在其他元素的顶部? 在我们已经看到的示例中,我们在定位上下文中只有一个定位的元素,它出现在顶部,因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢?
尝试添加以下到您的CSS,使第一段也是绝对定位:
p:nth-of-type(1) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
}
此时,您将看到第一段的颜色为绿色,移出文档流程,并位于原始位置上方一点。它也堆叠在原始的 .positioned
段落下,其中两个重叠。这是因为 .positioned
段落是源顺序中的第二个段落,并且源顺序中后定位的元素将赢得先定位的元素。
您可以更改堆叠顺序吗?是的,您可以使用z-index
属性。 “z-index”是对z轴的参考。你可以从源代码中的上一点回想一下,我们使用水平(x轴)和垂直(y轴)坐标来讨论网页,以确定像背景图像和阴影偏移之类的东西的位置。 (0,0)位于页面(或元素)的左上角,x和y轴跨页面向右和向下(适合从左到右的语言,无论如何)。
网页也有一个z轴——一条从屏幕表面到你的脸(或者在屏幕前面你喜欢的任何其他东西)的虚线。z-index
值影响定位元素位于该轴上的位置——正值将它们移动到堆栈上方,负值将它们向下移动到堆栈中。默认情况下,定位的元素都具有z-index为auto,实际上为0。
要更改堆叠顺序,请尝试将以下声明添加到 p:nth-of-type(1)
规则中:
z-index: 1;
你现在应该看到完成的例子:
请注意,z-index只接受无单位索引值;你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值,这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。
固定定位
还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同,只有一个主要区别——绝对定位固定元素是相对于 <html>
元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目,如持久导航菜单。
让我们举一个简单的例子来说明我们的意思。首先,从CSS中删除现有的 p:nth-of-type(1)
和.positioned
规则。
现在,更新 body
规则以删除position: relative;
声明并添加固定高度,如此:
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
现在我们要给<h1>
元素 position: fixed;
,并让它坐在视口的顶部中心。将以下规则添加到CSS:
h1 {
position: fixed;
top: 0;
width: 500px;
margin: 0 auto;
background: white;
padding: 10px;
}
top: 0;
是要使它贴在屏幕的顶部;我们然后给出标题与内容列相同的宽度,并使用可靠的老技巧 margin: 0 auto;
使它居中。 然后我们给它一个白色背景和一些内边距,所以内容将不会在它下面可见。
如果您现在保存并刷新,您会看到一个有趣的小效果,标题保持固定,内容显示向上滚动并消失在其下。 但是我们可以改进这一点——目前标题下面挡住一些内容的开头。这是因为定位的标题不再出现在文档流中,所以其他内容向上移动到顶部。 我们要把它向下移动一点;我们可以通过在第一段设置一些顶部边距来做到这一点。添加:
p:nth-of-type(1) {
margin-top: 60px;
}
你现在应该看到完成的例子:
实验属性: position sticky
有一个新的定位值可用称为 position: sticky
,尚未广泛支持。 这基本上是相对位置和固定位置之间的混合,其允许定位的元件像它被相对定位一样动作,直到其滚动到某一阈值点(例如,从视口顶部10像素),之后它变得固定。阅读我们的position:sticky 引用入口 查看详情和例子。
总结
我相信你用基本定位愉快地玩耍——它是创建复杂的CSS布局和UI功能背后的基本工具之一。 考虑到这一点,在下一篇文章中,我们将更有趣的定位——我们将进一步,开始建立一些真实世界有用的东西。
【end】