概述:position是我们日常在进行页面布局时经常用到的一个属性,可以说是非常重要的一个部分,那么他有那些属性呢,我们今天来解析一下position经常使用的几个属性。
在使用定位之前我们需要先了解一下什么是正常的文档流。
什么是文档流布局?一下是我搜索到的相对严谨的解释:
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动。
内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。
有三种情况将使得元素脱离文档流而存在,分别是 浮动,绝对定位, 固定定位。 但是在IE6中浮动元素也存在于文档流中。(百度搜索)
其中fixed与absolute会脱离正常的文档流,而relative和static则还是会处于正常的文档流中。
1.position:relative;
相对定位:元素依然还处于正常的文档流中,但是可以通过left、top、right和bottom的css规则来改变元素的位置。
<style>
#one{
100px/%;
height:100px/%;
background:red;
}
#two{
100px/%;
height:100px/%;
background:blue;
position:relative;
left:20px;
}
</style>
这时两个盒子还会按照正常的文档流进行排列,但是是可以通过left、top、right和bottom来进行位置的修改。
2.position:absolute;
绝对定位:元素会脱离正常的文档流,可以通过left、top、right和bottom的CSS规则来改变元素的位置。
细节:如果没有任何一个父级元素是非position:static
属性,则会相对于文档定位。这里它的父级元素是没有限制的,只要是他的父级元素任意一级都可以。如果它的父级元素和爷爷级元素都是非position:static
属性,则,它会选择距离最近的父元素。
<style>
#two{
100px;
height:100px;
background:blue;
position:absolute;
left:20px/%;
top:20px/%;
}
</style>
第二个盒子这时会浮动到你窗口的起始位置,如果他还有父级元素的话那么他是会在父元素的范围内进行定位,如果没有的话他是相对与于浏览器的窗口进行定位。
3.position:fixed;
相对于浏览器定位:元素脱离正常的文档流,可以通过left、top、right和bottom的css规则来修改元素的位置(经常使用与广告窗及在线咨询之类的服务窗口)。
<style>
#two{
100px;
height:100px;
background:blue;
position:fixed;
left:100px/%;
top:100px/%;
}
</style>
代码运行结果是始终按照窗口进行定位如果不使用left、top、right和bottom四个属性进行位置调整的话则是在父级元素窗口的初始位置。
4.position:static;
默认定位:元素将按照正常的文档流规则进行排列,即使没有给某个元素添加position,那么他就相当于有一个默认的position:static;这个就不多说了(因为没什么卵用)。
5.position:inherit;
继承定位:这个属性指的是子元素可以继承至父元素的一些属性,规定应该是从父元素继承 position 属性的值,但是这个属性在我们日常的使用中几乎不怎么碰,所以也就不多说了。
以上就是我对position的属性的一些使用所总结出来的经验,其中有些是原创,有些来源于网络搜索,谢谢大家!