第六十七章 定位

确切的说,是定位的方式,属性名是 position,可用的取值也并不多,四五个而已。但是除了默认值 static 之外,可以说其他的每个值都对应了一套定位方式,就需要仔细区分清楚,这就不是像前面介绍属性值那样,三言两语就可以说清楚的了。

静态定位 static

我们前面做的排版,完全就是基于这个前提的,所以可以说我们对这个定位方式已经很了解了。它不需要某些额外的属性来辅助(后面涉及到这些属性),依靠文档流的原始力量来进行定位。

相对定位 relative

这个分两步操作:首先,我们就像什么都没发生一样进行布局。然后,保持这个布局不变的前提下,把相对定位的元素移动到它们被定位到的地方。

所以,其他元素(不包含这个元素的后代元素)受到影响么?没影响,它们应该保持不动。

被定为元素原来的位置会被保留么?会的,因为其他元素没动,所以没人抢占它的位置。

那怎么确定它的位置呢?四个属性 left 、 right 、 top 、 bottom,表示从当前位置向某个方向移动相应的距离。一个都不写,就是保持原来的位置不动。上下互斥,只能写一个方向,同理,左右互斥。

z-index,Z 轴的顺序,说的是元素间堆叠的顺序,值越大,就越在上层,就不会被后面的元素遮挡。

这些在后面会有练习进行演示。

绝对定位 absolute

依旧是分两步走:首先假装没有这个元素,进行布局;然后保持当前布局不变,把这个元素放在定位位置。

那么它都没有原来位置可言了,相对于谁来定位呢?相对于从它向外第一个不是静态定位的祖先元素。

定位使用的属性还是上面五个,区别只在于,相对于谁发生了变化。

固定定位 fixed

和上面很像,我就不重复了,唯一的区别只在于:相对于谁定位。

固定定位是相对于浏览器窗口定位,那么页面滚动就与它无关了,因为浏览器不动,它就不动。这是什么?漂浮元素,对吧。

而且因为不保留位置,不相对于祖先元素定位,把它写在哪里也不重要了。

粘性定位 sticky

先说清楚,这是一个实验性的值,所以,如果需要使用,先认真查阅它的兼容性。

这家伙综合了上面很多特性,首先它保留原有位置,然后它是相对于浏览器窗口定位。最后,开始时,它和静态定位是一样的,只有当页面滚动到符合它定位的位置时,它才和浏览器保持相对不动。而反向滚动,回到它原来的位置时,它又停在了自己原来的位置。

就像有些网站的导航栏,看起来一切正常,但是向下滚动页面时,导航栏一直显示在最顶部。滚动回页首,它又停在了它布局的位置。


五种定位方式说完了,都是重点哦,我已经努力的把重点简练成了这样,又特别告诉你们了,所以要记住哦!

我们下一章开始应用它们。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第六十七章 定位

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏