[学习笔记] 静态网页开发基础之定位网页元素

# 学习 # · 2020-04-19

position属性

1、position属性:指定盒子的位置,指它相对其父级的位置或相对它自身应该在的位置。

(1)static:默认值,没有定位,元素按照标准文档流进行布局。

(2)relative:相对定位,使用相对定位的盒子位置常以标准文档流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准文档流中,其后的盒子仍以标准文档流方式对待它。

(3)absolute:绝对定位,盒子的位置以包含它的盒子为基准进行偏移。绝对定位的盒子从标准文档流中 脱离。这意味着它们对其后的其他盒子的定位没有影响,对于其他的盒子来说就好像这个盒子不存在一样。

(4)fixed:固定定位,它和绝对定位类似,只是浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的滚动条时,依然保持对象位置不变。

2、相对定位的特性:

(1)相对于自己的初始位置来定位。

(2)元素位置发生位移后,它原来的位置会被保留下来。

(3)层级提高,可以把标准文档流中的元素及浮动元素盖在下边。

3、相对定位的使用场景:相对定位一般情况下很少单独自己使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量。

4、绝对定位的特性:

(1)绝对定位是相对于它的定位父级的位置来定位的,如果没有定位父级,就一直往上找(可以是父级的父级)都没有就相对于浏览器窗口来定位。

(2)元素位置发生偏移后,它原来的位置不会被保留下来。

(3)层级提高,可以把标准文档流中的元素及浮动元素盖在下边。

(4)设置绝对定位的元素脱离文档流。

5、绝对定位的使用场景发:一般情况下,绝对定位用在下拉菜单,焦点图轮播,弹出数字气泡,特别花边等场景。

6、固定定位特性:

(1)相对于浏览器窗口来定位。

(2)偏移量不会随滚动条的移动而移动。

7、固定定位的使用场景:固定定位一般用于在网页中被用在窗口左右两边的固定广告,返回顶部图标,吸顶导航栏等。


z-index属性和元素透明

1、z-index属性:在CSS中,z-index属性用于调整元素定位时重叠层的上下位置。

(1)z-index属性值:整数,默认值为0。

(2)设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系。

(3)z-index值大的层位于其值小的层上方。

(4)网页中的元素都含有两个堆叠层级:一个是为设置绝对定位时所处的环境,另一个是设置绝对定位是所处的堆叠环境。如果需要设置了绝对定位的层在没有设置绝对定位的层下方,只需设置绝对定位的层的属性z-index值为负即可。

2、设置层的透明度:

(1)opacity:x值为0~1,值越小越透明

opacity:x

(2)filter:x值为0~100,值越小越透明

filter:alpha(opacity=x)

3、在使用CSS设定元素的透明度时,通常在样式表中同时设置这两种方法,以适应所有的浏览器。

如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/265/

评论