本文同时发表于本人个人网站 www.yaoxiaowen.com
在正式讨论position之前,我们需要知道几个概念。
块元素:独占一行的元素。比如div,h1~h6,p等,它是自带换行的。
内联元素:就是和相邻的内联元素同在一行的元素,比如span,a,img,small,em之类的。
以上内容是从是否独占一行的角度来说的,从另一个角度来说,也分为两种。
替换元素:就是浏览器根据标签的属性和内容来判断具体显示的内容。input,img,textarea等属于此类,以input为例。<input type=“text”/> 它是个文本输入框,而<input type=“button”/>它就是个按钮了。
非替换元素:绝大部分标签都是非替换元素。就是该标签直接告诉浏览器要显示的内容。比如<p>yaoxiaowen.com</p>.
像width,height,padding,margin之类的,都是适用于块元素的属性,内联元素设置了也不会有什么效果。。当然,他们默认如此。但是通过display属性,我们也是可以进行转换的。比如 display: block; 让内联元素也可以拥有块元素的属性,。display:inline,块元素也可以显示为内联元素。
而很简单,也是最重要的概念,流(Flow):简单来说,就是一份不包含任何css样式的html文档,是如何在浏览器中显示的。html文档,被浏览器从行到下,从左到右的顺序读取,这个顺序也就是它显示的顺序。在html文档中所写的第一个元素,那么在浏览器中也是第一个显示的。html文档中的第二个元素,浏览器中也是第二个显示。很简单的依次类推。。但是有区别的是,如果是块元素,那么它就独占一行。它后面的内容自然的从上到下排在它后面。而内联元素, 则自然的从左到右排列。可是浏览器的宽度总是有限的。内联元素一个挤一个,集满了这一行之后呢,那么它会自动的到下一行。
文本内容(字符串)本身不属于什么元素。但是浏览器在对待文本内容时,依旧将其看做一种特殊的内联元素,浏览器会计算其对应的间距等。
我觉的,这个概念还是很好理解的。你打开word写一个文档,也是类似的顺序,块元素就好比标题,它自占一行(当然,不要说标题很长占多行那种例外),写完标题之后,你会手动输入一个enter来换行。而内联元素就是普通的文字,你只管打字,它满一行了,它会自动换成到下一行了。
流的概念,很简单。就是从上到下(块元素),从左到右(内联元素,如果这一行满了,自动换行到下一行去接着排)。不过它很重要,流(Flow)概念和盒子模型(Box Model)是理解布局的基础。
按照流的概念来显示html文档,自然没办法满足各种五花八门的需求,所以我们就需要通过css来进行定位布局。
当然,主要是通过position来进行布局。
position属性具体值如下。
inherit属于继承,连IE8都不支持,所以不具体讨论,我们讨论前四种。同时position属性适用于任何元素,当对内联元素也设置position时,就相当于也同时设置了它们的 display:block了。
一,static(静态定位)。
静态布局,就是按照标准流模型来布局,从上到下,从左到右。这也是position默认的布局方式。对静态布局设置位置属性(left,right,top,bottom)没意义。
而我们可以通过float(浮动)来改变这种默认布局。
float:left|right|none|inherit
还是上代码,看效果,来具体讨论吧。。
html代码
<footer><p>我是footer的内容</p></footer>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="left_content">---测试文字省略。。。。。。------</div>
<div class="box4">box4</div>
CSS代码
body{
margin: 5px;
}
footer, div{
margin: 10px;
padding: 0px;
}
.box1{
float: right;
}
.box2{
float:right;
}
效果:
所谓float(浮动),就是说,通过这个属性,让该元素脱离了标准流,来让这个元素在水平方向靠近某一个方向。(虽然只能是左或者右)。在标准流当中,就相当于不存在这个元素了。浮动元素也不会占据正常流的空间。所以排在该元素下面的元素,自然的就接着标准流排列。算是补上了设置float的元素的空间,从另一个角度来理解,如果正常流在z轴上,z=0,那么浮动元素,z=1。
结合简单demo代码和效果图,有几点需要注意。
1,既然float是在水平方向(x轴)方向,向左或者向右朝浏览器边缘靠近,所以说他是X轴的移动,那么竖直方向(Y轴)呢?Y轴的位置是不变的。结合效果图,box1在footer下面,我们设置box1,float:right,所以box1,就是Y轴不变,漂浮到右边去了。(先忽略同样设置了float:right 的box2)而left_content的文字区域。本来在box1的下面,那么现在box1脱离了自然流,所以left_content自然而然的在标准流中向上走。填充在了本来box1所在的位置。所以说,box1和left_content的Y轴是相同的。
讨论到这里,有人就该说了,你说box1和left_content的Y轴是相同的。你这是瞎吗?通过边框你也能看出来他们的Y轴不相同啊。其实这是一个常见的误区,也是很容易引起bug的地方。在正常流中,两个块元素在上下的margin是会折叠的。并且以大的值为准,所以虽然 footer和left_content都是margin:10px,但是他们上下之间的间距也是10,因为上下margin折叠了。(左右margin才会相加)。而box1浮动了,它脱离了标准流,box1和footer的下方margin不会折叠了。所以footer和box1之间的margin是20,而footer和left_content之间的margin是10。。因此box1再向右浮动时,Y轴是不变的。这是正确的理解。只不过牵扯到margin之类的,需要重新计算
2,既然标准流相当于z=0,浮动元素相当于z=1,那么就相当于 浮动元素会遮挡住 它后面的标准流的内容。可是效果图可以看出,文字并没有被两个浮动元素(box1,box2)所遮挡,这是因为内联元素,相当于拥有特异功能,它能感知到浮动元素的存在,并且自然的绕过去。所以left_content这个块,在浮动元素的下面,但是因为内联元素的特异功能,所以导致文字没有被遮挡。
3,通过对比浮动元素box1,和正常流元素box4,可以发现,box4很宽,而box1很窄。这是因为块元素默认width:100%,而 对于非替换元素,在设置float后,如果不被明确的设置一个width,那么它会尽可能的窄。所以设置元素float之后,一般都设置一个width。
4,如果说浮动元素的后面,依旧有浮动元素。比如 box1设置float之后,它后面的box2也设置了float之后,那么理解思路依旧是一样的。在box1设置了float:right,所以脱离了标准流,Y轴不变,浮到右边去了,而它后面的box2,在标准流中自然的补上去,到原来box1的位置,而box2发现自己也被设置了float:right之后,那么它也脱离了标准流,(相当于z=1),Y轴不变,浮动到右边,可是还没浮动到边缘呢,发现前面有个box1挡着了,那box2就排在box1的后面那个位置了。可以想象,如果有box34567依次被同样设置,这一行都挤不下了,那么他们自然的到下一行,继续靠这右边排列。
5,因为浮动元素脱离了标准流,所以它的父元素会感受不到它,因而可能引起父元素的高度很窄,造成坍塌。这个问题就属于清除浮动的内容了。我上一篇的博客有写这个方面,网上大牛的文章更多。
所以整体而言,float(浮动)很好理解。浮动元素先在标准流中排好,然后Y轴不变,X轴向左或者向右,朝着边缘靠近。如果前面正好也有其他浮动元素,那么它就顺序排着就好了。
二:relative(相对定位)
实行了相对布局的元素,先假设其为静态布局,判断出它所应该处于的初始位置,然后通过该元素的位置属性(top,left,right,bottom),在该初始位置的基础上实施偏移。 但是该元素位置偏移了,却依旧的占据着原来的空间。它和静态的float不同,它并没有脱离标准流。
通过一个简单的demo来说明:
html代码:
<footer><p>我是footer的内容</p></footer>
<div class="outside_box_wrap">
<div class="insider_box_wrap">
<div class="box1 box_size">box1</div>
<div class="box2 box_size">box2</div>
<div class="box3 box_size">box3</div>
</div>
</div>
<div class="text_content"> ---测试文字省略。。。。----</div>
css代码:
footer, div{
margin: 10px;
padding: 0px;
}
.box1{
padding: 0px;
margin: 0px;
}
.box2{
position: relative;
top: 30px;
left: -20px;
}
.outside_box_wrap{
position: relative;
left: 50px;
top: 100px;
right: 200px;
}
.insider_box_wrap{
position: static;
margin-top: 50px;
margin-left: 50px;
margin-right: 10px;
}
效果图:
有几点需要注意:
1,通过 outside_box_wrap 就可以清晰的看出来这个布局的含义了,outside_box_wrap 区域在它原来的位置上以左上角为参考点 偏移了(50, 100)。但是它下面的left_content 文字区域却依旧 没有在标准流中向上补充。那是因为对于 outside_box_wrap 区域,它在static情况下应该所处的那个位置,它即使偏移了,但是确依旧占据着那一片的空间。标准流中的其他元素也无法使用。而同时它的偏移,也对其他元素产生了遮挡效果。
2,参考box2和outside_box_wrap可以看出,位置属性是可以设置负值的。top -10px,是向下偏移-10像素(那其实就是向上偏移10个像素)。
3,这种情况下,(在没有明确设置width和height时),对于top和bottom,如果没有设置值,那么他们就是auto(其实就是0),那么此时,他们就和父元素一样的宽度。如果只有其中一方为auto,那么这一方就取另一方的相反数,而如果top和bottom都有具体值呢,那么bottom就取top得相反数。通过 outside_box_wrap 也能看出来,outside_box_wrap的右边都超出了浏览器的宽度了。所以默认情况下,设置了relative的元素,宽度都是100%。
4,对于left和right来讲,和top,bottom的计算方式差不多, 不过不同的是哪个方向优先级更高,取决于页面所使用的语言,对于绝大部分从左向右读的语言(比如英语汉语),left优先级高,而对于从右向左读的阿拉伯语,right优先级高。
三,absolute(绝对定位)
绝对定位的元素,也是通过设置位置属性(left,top,right,bottom)来实施的位置,不过与relative不同的是,绝对定位脱离了标准流,所以它不再占用标准流的空间了。而他偏移的参考位置,是包裹它的(离它最近的)设置了absolute或fixed或relative属性的祖先元素。如果找不到满足条件的。那就以整个当前页面就是参考。(这种情况其实就是以html,body来作为参考元素了)。
通过简单demo来说明。
html代码。
<footer><p>我是footer的内容</p></footer>
<div class="outside_box_wrap">
<div class="insider_box_wrap">
<div class="box1 box_size">box1</div>
<div class="box2 box_size">box2</div>
<div class="box3 box_size">box3</div>
</div>
</div>
<div class="text_content"> ---测试文字省略......-----</div>
<div class="box4 box_size">box4</div>
css代码。
footer, div{
margin: 10px;
padding: 0px;
}
.box1{
position: absolute;
padding: 0px;
margin: 0px;
}
.box2{
position: absolute;
top: 30px;
left: -20px;
}
.outside_box_wrap{
position: absolute;
left: 50px;
top: 100px;
right: 200px;
}
.insider_box_wrap{
position: static;
margin-top: 50px;
margin-left: 50px;
margin-right: 10px;
}
效果图。
可以看出:
1,outside_box_wrap 设置了absolute,但是他没有祖先元素设置了position的属性为 absolute或fixed或relative,所以他就是以整个页面来作为参考点设置(50, 150)坐标的。而对于 设置绝对定位的 box2来讲,它的参考位置是outside_box_wrap。而不是他的直接父元素 insider_box_wrap(同时也是 outside_box_wrap的子元素)。
2,注意到 我们对 outside_box_wrap 设置了left和right,它的宽度设置并不像relative那样,right取相反数,而把宽度设置了100%,这说明,针对绝对定位,left,right,top,bottom。在未明确设置width或height情况下,是同时生效的。而如果明显设置了width,或者height,四个位置属性的优先级就变成了 top>bottom,left>right(针对英语等从左往右读的语音),right>left(针对阿拉伯语等从右向左读的语言)。
3,四个位置属性设置负值同样起效果。
4,需要注意是box1的位置。它设置了absolute,但是并没有设置top,left,right,bottom中的任何一个。而他的左上角是和 insider_box_wrap的左上角重叠。这是因为 insider_box_wrap 包裹了它,它就默认处在它最左上角的位置了。(我觉的这是一个比较有意思的现象)。
四,fixed(固定定位)
fixed其实只是一种特殊的absolute定位。差别在于absolute的参考位置是 position不是static的祖先元素。而fixed参考位置则是浏览器窗口。也就是说 固定定位的元素并不是随着滚动页面而消失,它就一直在浏览器窗口的某个固定位置。其余的就和absolute一样。。这种定位最常用的是 页面设置了优惠券区域,固定页眉,页脚之类的。因为和上一个absolute很相似,所以就不再演示demo了。
另外,对于因为各种定位产生的遮挡问题,css有一个属性叫做z-index,用来设置元素的堆叠顺序。其实就是Z轴。垂直于屏幕所在的平面,朝向用户的一面为正,背面为负。所以z-index同样可以为正为负。而默认的定位时,元素z-index=0的。z-index只有postion不是默认static的元素才会生效。
以上内容就是本人关于css中定位的理解了。如果理解肤浅或错误的地方,欢迎指点批评。
-------
作者: www.yaoxiaowen.com
github: https://github.com/yaowen369