<b>具体解读网页筹划中的DIV+CSS定位</b>[网站美工]

 　　定位一向是WEB尺度利用中的难点,假如理不清楚定位那么大概应实现的效果实现不了,实现了的效果大概会走样.假如理清了定位的原理,那定位会让网页实现的越发完善.

　　定位的定义:

　　在CSS中关于定位的内容是:position:relative | absolute | static | fixed

　　static 没有分外的设定,遵守基本的定位规定,不能通过z-index举行层次分级.

　　relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index举行层次分级.

　　absolute 脱离文档流,通过 top,bottom,left,right 定位.选取其近来的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点举行定位,可以通过z-index举行层次分级.

　　fixed 固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素.可通过z-index举行层次分级.

　　CSS中定位的层叠分级:z-index: auto | namber;

　　auto 顺从其父对象的定位

　　namber 无单位的整数值.可为负数

　　定位的原理:

　　可以位移的元素 (相对定位)

　　在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们仍然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动.但是事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法.而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分利用.)针对一个相对定位的元素所产生的.我们看下面的图:

　　我们看图中是一个宽度为200px,高度为50px,margin:25px; border:25px solid #333; padding:25px; 相对定位的元素,并且位移距上50px,距左50px.而下方是一块默许定位的黑色区块.我们看到这个处在文本流的区块被上面的相对定位挡住了一部份,这阐明:“当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流”.除非设置其z-index值为负值,但是在 Firefox等浏览器中z-index为负值时将不会显示.并且我们发现当相对定位元素举行位移后,表现内容已经脱离了文本流,只是在本文流中还为本来的相对对定位留下了原有的总宽与总高(内容的高度或是宽度加上margin\border\padding的数值).这阐明在相对定位中,固然表现区脱离了本来的文本流,但是在文本流中还还有此相对定位的老窩.这点要分外注意,因为在实际利用中假如相对定位的位移数值过大,那么原有的区域就会形成一块空白

　　以上是“<b>具体解读网页筹划中的DIV+CSS定位</b>[网站美工]”的内容，如果你对以上该文章内容感兴趣，你可以看看七道奇为您推荐以下文章：