老生常谈position定位——让人又爱又恨的属性

2020-05-05 07:44:53易采站长站整理

4、fixed(固定定位)

这个定位是相对于浏览器窗口进行的定位,移动方法跟相对和绝对定位一样的。

它也会脱离文案流,我们常见的侧边栏或者广告图就是用这个功能实现的。很实用,很强大的功能。

5、inherit(继承定位),就是从父元素继承position定位属性,不怎么常用。

讲到这里,我们就涉及到一个z-index (层级)的问题。刚才我们讲过,如果给子元素全部设置了absolute,那么所有的子元素就会堆叠在一起,互相遮盖。

如果我们需要在一个元素上堆叠好多层,那怎么给它们排序呢。这就需要用到z-index属性了。

z-index属性的属性值是数字。数字越大,那么它就显示的最考上,比如说吧,

z-index=0 的元素就会再 z-index=1的下面显示,z-index=10会再z-index=8上面显示,所以,堆叠它们的显示顺序,设置z-index就可以了。

当然,如果不设置z-index的话,默认的,后面的元素会遮盖前面的元素。

使用时需注意的问题:

1、float属性不可以和position属性共用,切记!

2、使用absolute时记得给父元素加relative

3、除了用left和top外,还有right和bottom,活学活用

4、能不用position就不用position,毕竟容易把布局搞乱

5、Javascript中调用position的方法是:div.style.positio=”absolute”类似 div是变量名

上面只是简单的讲了一下position的基本东西,如果你在这里面没有了解到你想要的答案,你可以在下面给我留言,我会积极回复的。

以上这篇老生常谈position定位——让人又爱又恨的属性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。