在编写css时经常用到position属性,position主要是控制元素布局中的定位机制,默认情况是static,但是还是会随着正常流中的默认位置偏移。它还有其他几种属性:
- fixed
- relative
- absolute
- inherit
下面依次说明介绍一下。
绝对定位
- fixed
- absolute
相对定位
- relative
无定位
- static
至于inherit,并不是很熟,查阅了一下:>inherit 规定应该从父元素继承 position 属性的值。
[来源] (http://www.w3school.com.cn/cssref/pr_class_position.asp)
fixed
fixed是一种绝对定位,它的特点是相对于浏览器窗口定位,一般调整位置时用到的属性是top,bottom,right,left.(一般我们制作网站时,常常要考虑网站的缩放元素位置不变,这个时候,个人比较喜欢用的就是fixed了。不过这个有个不便之处,就是位置是定死的,之后修改啥的,会比较麻烦(当然了,目前还没找到其他的解决方式,都是把位置定死的,如果大神们有其他的解决方式,麻烦告诉我一下)。另外,目前比较流行响应式设计,boostrap的响应式设计个人感觉还是很强大的,大家可以去他们的官网看看,这里附上一个链接好了 但是在网页缩放都不改变位置上,还是要避免响应式设计。
absolute
这也是一种绝对定位。相对于不是static的第一个父元素进行定位,主要也是top,bottom,left,right属性来更改(具体的之后会补充更新)
relative
相对定位,相对于正常定位的元素进行定位。
<h1>正常定位的标题</h1>
<h2 style=`position:relative;left:-20px`>是向左移动20px</h2>
<h3 style=`position:relative;left:20px`>向右移动20px</h2>
#######效果可以类似模拟一下
<strong> 正常定位的标题</strong>
<strong>是向左移动20px</strong>
<strong>向右移动20px</strong>
至于inherit,用的很少,据说是从父元素继承 position 属性的值。IE对其的兼容性并不客观……
<strong>菜鸟新手,不足之处请指正补充!后续学习了会更新哒~~~</strong>