Web之路笔记之二 - CSS Positioning
CSS中控制各个Block element的位置方式之一,tag为position,有4种属性。
1. static
一般网页默认的属性,表示element根据页面正常流(normal flow)进行排列,也就是默认的摆放方式,所以一般不会在CSS文件内编写。
2. absolute
表示element从页面正常流中去除,本该所属的地方不会保留位置,并且相对于距离它最近的父元素(parent element)进行移动。比如说在body内的一个div设为absolute,那么移动的时候就是相对于body这个block进行移动;如果没有父元素,则根据html元素进行移动。
3. fixed
表示element从页面正常流中去除,本该所处的地方不会保留位置,并且相对于浏览器等视窗进行移动。需要注意的是,该元素不会因为页面滚动而移动,也就是对一个fixed的元素,无论你如何滑动滚轮,它不会从一开始看到他时候的地方移动一步。使用较少,本来以为可以用于固定背景图片,但是因为背景图片是在body元素下设置的,所以没办法单独对背景图片进行设置为fixed。
4. relative
此处说的relative相关,是与该element原来在页面正常流中本该所属的位置的相关,也就是说,如果只设置了position: relative而不对element的top等进行设置的话, 显示的效果和默认的static没有区别。另外,设置完四周参数之后的效果,尽管移动了位置,但是原本本该所属的地方仍然会留出空白,也就是说他仍然存在于页面正常流中。
需要注意的是,相关的element无论如何设置z-index也不能够置于static element之上;另外一点是limits the scope of absolutely positioned child elements,这句话仍需要继续理解。
另外,移出页面正常流fixed和absolute的element会覆盖其他positioned element,不希望覆盖的时候,使用z-index属性可以修改。
z-index性质是决定了一个element在栈内的顺序,越大的在上层。当两个element覆盖在同一个地方,在html越靠后的越先显示。需要注意的是,z-index只对除static以外的element起作用!也就是说如果和(默认)static元素相比,永远是static在上而且不能用z-index改变显示顺序。
参考:https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/css/css_positioning.asp
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。