CSS之position解释

上篇是CSS盒模型，在盒模型的基础上说明一下position定位：

position的四个属性值：

　　1、static

　　2、relative

　　3、absolute

　　4、fixed

下面分别讲述这四个属性。

1、static

position的默认属性，在这方面个浏览器解析与渲染是一致的，top，left，bottom，right不产生作用

2、relative

相对定位，重点是“相对的对象”--想对谁？答案是它本身的位置。也就将relative改为static，再在视觉上加上top，left，bottom，right值，就是relative所呈现的视觉效果。

可以这样理解，如果不设置relative时它应该在位置A，一旦设置后就以A为参考点进行偏移。补充一下，top和bottom冲突了怎么办？最后声明的起作用，left和right也是一样的道理。

随后的问题是“对其他标签的影响怎样”。

答案是它原来在哪里，现在就在哪里，可能被遮盖，也可能遮盖其他。若其他元素的position是static那么被遮盖，z-index属性对position是static的元素不起作用，在发生覆盖冲突时，设置z-index：-1且position为非static的元素被position:static的元素覆盖。若其他元素的position是非static那么后面定义的覆盖前面的。此时z-index也起作用，设置了z-index的覆盖方式遵守z-index。

3. absolute
从定义声明position：absolute的元素向外找，第一个position值不是static的元素就是被参考的对象。

再进一步讲，top参照padding的内上线，bottom参照padding的内下线，right和left同理。

遮盖的处理用z-index。

4. fixed
有了上面的解释这个就好理解了，fixed是特殊的absolute，即fixed的参照对象是body，需要注意的是body也是可以有margin和padding的，还有body默认的8px的margin也应该被注意。

以上所写都是主流浏览器使用的，如有例外请留言，当然有什么问题也可以留言讨论！

转载于:https://www.cnblogs.com/longze/archive/2012/11/25/2787628.html

CSS之position解释相关推荐

dedecms切换模板css,DEDECMS的模板的css的详细解释 -电脑资料
有的比较菜鸟的站长们,常常看到模板文件的CSS的代码密密麻麻的,就有点头晕!我在网上找到一位热心的站长给出了一份织梦模板的CSS详解,以下就是代码和代码的解释! /*---------- import ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
十步图解CSS的position
2019独角兽企业重金招聘Python工程师标准>>> CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常 ...
CSS中position的几个属性值
CSS中position的几个属性值 position的四种取值 : static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定 ...
css中position属性（absolute/relative/static/fixed）
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
css定位position
闲言碎语不多说,直接开写! 关于定位我们可以使用css的position属性来设置元素定位类型,position的设置项如下: a.relative生成相对定位元素,元素所占据的文档流的位置不变(即 ...
[css] 要是position跟display、overflow、float这些特性相互叠加后会怎么样？
[css] 要是position跟display.overflow.float这些特性相互叠加后会怎么样? display:none之后别的样式设置成什么都不管用了,dom元素不可见了.positio ...
[css] 说说position的absolute和fixed共同与不同点分别是什么？
[css] 说说position的absolute和fixed共同与不同点分别是什么? 相同点: 1.都是用来给元素定位的属性,具有定位元素的一切特点(例如脱离文本流.不占据空间等等): 2.改变元素 ...
[css] 请你解释下什么是浮动和它的工作原理是什么？同时浮动会引起什么问题？
[css] 请你解释下什么是浮动和它的工作原理是什么?同时浮动会引起什么问题? 什么是浮动:我们在做布局的时候用到的一种技术,通过浮动可以让元素左右浮动,然后通过margin调整位置工作原理:使元素脱 ...
[css] 说说position:sticky有什么应用场景
[css] 说说position:sticky有什么应用场景吸顶效果个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试 ...

CSS之position解释

CSS之position解释相关推荐

最新文章

热门文章