第8章 定位网页元素
一.定位在网页中的应用
在CSS中有三种基本的定位机制,分别是标准流,浮动和绝对定位。使用浮动的方式可以定位网页元素。
二.position属性
position属性从字面上看就是指定盒子的位置,指它相对其父级的位置或相对它自身应该在的位置。
1.static:默认值,没有定位,元素按照标准文档流进行布局。
2.relative:相对定位,使用相对定位的盒子位置常以标准文档流的排版方式为基础,然后使盒子
相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准文档流中,其后
的盒子仍以标准文档流方式对待它。
top,right,bottom,和left这四个属性除了可以设置为像素值外,还可以设置为百分数。
3.absolute:绝对定位,盒子的位置以包含它的盒子为基准进行偏移。绝对定位的盒子从标准文档流中
脱离。这意味着它们对其后的其他盒子的定位没有影响,对于其他的盒子来说就好像这个
盒子不存在一样。
4.fixed:固定定位,它和绝对定位类似,只是浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的
滚动条时,依然保持对象位置不变。
5.相对定位的特性:
(1)相对于自己的初始位置来定位
(2)元素位置发生位移后,它原来的位置会被保留下来
(3)层级提高,可以把标准文档流中的元素及浮动元素盖在下边
6.相对定位的使用场景:
相对定位一般情况下很少单独自己使用,都是配合绝对定位使用,为绝对定位创造定位父级
而又不设置偏移量
7.绝对定位的特性:
(1)绝对定位是相对于它的定位父级的位置来定位的,如果没有定位父级,就一直往上找(可以是父级
的父级)都没有就相对于浏览器窗口来定位
(2)元素位置发生偏移后,它原来的位置不会被保留下来
(3)层级提高,可以把标准文档流中的元素及浮动元素盖在下边
(4)设置绝对定位的元素脱离文档流
8.绝对定位的使用场景发:
一般情况下,绝对定位用在下拉菜单,焦点图轮播,弹出数字气泡,特别花边等场景
9.固定定位特性:
(1)相对于浏览器窗口来定位
(2)偏移量不会随滚动条的移动而移动
10.固定定位的使用场景
固定定位一般用于在网页中被用在窗口左右两边的固定广告,返回顶部图标,吸顶导航栏等
三.z-index属性
1.z-index属性的应用
在CSS中,z-index属性用于调整元素定位时重叠层的上下位置。
设置层的透明度
opacity:x (x值为0~1,值越小越透明)
filter:alpha(opacity=x) (x值为0~100,值越小越透明)
在使用CSS设定元素的透明度时,通常在样式表中同时设置这两种方法,以适应所有的浏览器
网页中的元素都含有两个堆叠层级:一个是为设置绝对定位时所处的环境,另一个是设置绝对定位是所处的
堆叠环境。如果需要设置了绝对定位的层在没有设置绝对定位的层下方,只需设置绝对定位的层的属性z-index值为负即可。
一.定位在网页中的应用
在CSS中有三种基本的定位机制,分别是标准流,浮动和绝对定位。使用浮动的方式可以定位网页元素。
二.position属性
position属性从字面上看就是指定盒子的位置,指它相对其父级的位置或相对它自身应该在的位置。
1.static:默认值,没有定位,元素按照标准文档流进行布局。
2.relative:相对定位,使用相对定位的盒子位置常以标准文档流的排版方式为基础,然后使盒子
相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准文档流中,其后
的盒子仍以标准文档流方式对待它。
top,right,bottom,和left这四个属性除了可以设置为像素值外,还可以设置为百分数。
3.absolute:绝对定位,盒子的位置以包含它的盒子为基准进行偏移。绝对定位的盒子从标准文档流中
脱离。这意味着它们对其后的其他盒子的定位没有影响,对于其他的盒子来说就好像这个
盒子不存在一样。
4.fixed:固定定位,它和绝对定位类似,只是浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的
滚动条时,依然保持对象位置不变。
5.相对定位的特性:
(1)相对于自己的初始位置来定位
(2)元素位置发生位移后,它原来的位置会被保留下来
(3)层级提高,可以把标准文档流中的元素及浮动元素盖在下边
6.相对定位的使用场景:
相对定位一般情况下很少单独自己使用,都是配合绝对定位使用,为绝对定位创造定位父级
而又不设置偏移量
7.绝对定位的特性:
(1)绝对定位是相对于它的定位父级的位置来定位的,如果没有定位父级,就一直往上找(可以是父级
的父级)都没有就相对于浏览器窗口来定位
(2)元素位置发生偏移后,它原来的位置不会被保留下来
(3)层级提高,可以把标准文档流中的元素及浮动元素盖在下边
(4)设置绝对定位的元素脱离文档流
8.绝对定位的使用场景发:
一般情况下,绝对定位用在下拉菜单,焦点图轮播,弹出数字气泡,特别花边等场景
9.固定定位特性:
(1)相对于浏览器窗口来定位
(2)偏移量不会随滚动条的移动而移动
10.固定定位的使用场景
固定定位一般用于在网页中被用在窗口左右两边的固定广告,返回顶部图标,吸顶导航栏等
三.z-index属性
1.z-index属性的应用
在CSS中,z-index属性用于调整元素定位时重叠层的上下位置。
设置层的透明度
opacity:x (x值为0~1,值越小越透明)
filter:alpha(opacity=x) (x值为0~100,值越小越透明)
在使用CSS设定元素的透明度时,通常在样式表中同时设置这两种方法,以适应所有的浏览器
网页中的元素都含有两个堆叠层级:一个是为设置绝对定位时所处的环境,另一个是设置绝对定位是所处的
堆叠环境。如果需要设置了绝对定位的层在没有设置绝对定位的层下方,只需设置绝对定位的层的属性z-index值为负即可。