2019-03-28

固定定位:

    当元素的position属性设置fixed时,则开启了元素的固定定位,固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样

不同的是:固定永远都会相对于浏览器窗口进行定位

            固定会固定在浏览器窗口某个位置,不会随滚动条移动

IE6不支持固定定位

元素的层级:

    如果定位元素的层级一样,则下面的元素则会往上覆盖

通过z-index属性可以用来设置元素的层级

可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示

对于没有开启定位的元素不能使用z-index

设置元素的透明背景

opacity可以用来设置元素背景的透明,它需要一个0-1之间的值

0 表示完全透明

1 表示完全不透明

0.5 表示半透明

opacity属性在IE8及以下的浏览器中不支持

IE8及以下的浏览器需要使用如下属性代替

alpha(opacity=透明度)

透明度,需要一个0-100之间的值

0 表示完全透明

100 表示完全不透明

50 半透明

这种方式支持IE6,但是这种效果在IE Tester中无法测试

使用background-image来设置背景图片

语法:background-image:url(相对路径);

如果背景图片大于元素,默认会显示图片的左上角

- 如果背景图片和元素一样大,则会将背景图片全部显示

- 如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素

可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色

一般情况下设置背景图片时都会同时指定一个背景颜色

background-repeat用于设置背景图片的重复方式

可选值:

repeat,默认值,背景图片会双方向重复(平铺)

no-repeat,背景图片不会重复,有多大就显示多大

repeat-x, 背景图片沿水平方向重复

repeat-y,背景图片沿垂直方向重复


背景固定:

当背景图片的background-attachment设置为fixed时,

背景图片的定位永远相对于浏览器的窗口

background-attachment: fixed;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 固定定位,脱离文档流,大部分与绝对定位一样,相对于浏览器窗口进行定位 固定定位会固定在定位处,不会随浏览器的滚动条...
    一万八_7489阅读 133评论 0 0
  • 昨天定位中有一个定位是固定定位fixed固定定位的元素会被锁定在屏幕的某个位置上,当访问者滚动网页时,固定元素会在...
    Promise_18阅读 248评论 0 0
  • 如果定位元素的层级是一样,则下边的元素会盖住上边的 通过z-index属性可以用来设置元素的层级 可以为z-ind...
    浮旧浮梦_968d阅读 171评论 0 0
  • 固定定位:固定定位的元素会被锁定在屏幕的某个位置上,当访问者滚动网页时,固定元素会在屏幕上保持不动。 当将posi...
    _奋斗努力阅读 410评论 0 0
  • 1、如果定位元素的层级是一样,则下边的元素会盖住上边的 通过z-index属性可以用来设置元素的层级 可以为z-i...
    您的名称已被使用阅读 207评论 0 0