美文网首页
定位与层级

定位与层级

作者: 沙子_32c6 | 来源:发表于2018-09-11 22:13 被阅读0次

定位

使用position属性把一个元素放置到网页中的位置
可选值:
(1)static:默认值,元 素没有开启定位

(2)relative:开启元素的相对定位(开启了元素的相对定位 以后,而不设置偏移量时,元素不会发生任何变化)。

    1>相对定位相对于其自身原来在文档流中的位置定位、
    2>不会脱离文档流、
    3>并且使元素提升一个层级、
    4>不会改变元素的性质(块还是块,内联还是内联)

当开尿素启了元素的定位(position不是默认值)时,可以通过以下四个属性来设置元素的偏移量(可以为负值):

    left:相对于定位位置的左侧偏移量;
    right:相对于定位位置的右侧偏移量;
    top:相对于定位位置的上边偏移量;
    bottom:相对于定位位置的下边偏移量;

一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

(3)absolute:开启元素的绝对定位。绝对定位相对于离他最近的且开启定位的祖先元素定位
绝对定位:
1.开启绝对定位,会使元素脱离文档流
2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位,都会同时开启父元素的相对定位)
如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质:
内联元素变成块元素,
块元素的宽度和高度默认都被内容撑开

(4)fixed:开启元素的固定定位(也是绝对定位的一种)。固定定位是特殊的绝对定位,永远相对于浏览器 整个窗口定位,固定在浏览器窗口,不会随着窗口滚动而滚动(但是不是相对于浏览器左上角进行定位)

绝对定位:
1.开启绝对定位,会使元素脱离文档流
2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位,都会同时开启父元素的相对定位)
如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质:
内联元素变成块元素,
块元素的宽度和高度默认都被内容撑开

层级

如果定位元素的层级是一样,则下边的元素会盖住上边的
通过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中无法测试

父元素的层级再高,也不会盖住子元素

相关文章

  • 定位与层级

    定位 使用position属性把一个元素放置到网页中的位置可选值:(1)static:默认值,元 素没有开启定位 ...

  • HTML 日常了解6

    固定定位 元素的层级 背景 背景偏移与定位 背景固定

  • xpath定位总结

    一、定位方式 路径定位--绝对路径、相对路径 利用元素属性定位 层级与属性结合定位 属性与逻辑定位结合 二、语法 ...

  • 元素层级、背景、表格

    元素层级 想要设置元素层级必须要开启定位(上一章有定位的描述) 后面的数字是设置层级的数字越大层级越高,但是父类的...

  • 2022-11-01 z-index 层叠上下文

    z-index:改变元素的层级,只在定位元素position上有效(非static),当元素与元素之间的层级进行比...

  • 层级和定位

  • css之目录省略号

    效果 思路 让省略号铺满一行,相对整行绝对定位。标题定位在左边,页码定位在右边,层级高出省略号的层级。 代码 网站...

  • 定位09-11

    定位 通过position属性来设置元素的定位-可选值: 相对定位: 绝对定位: 固定定位: eg: 元素的层级 ...

  • 2019-04-17定位

    定位 绝对定位absolute:父级没有定位时时,相对文档定位,脱离文档流,提升层级相对定位relative:固定...

  • appium元素定位

    appium提供了许多元素定位的方法,如id定位、name定位、class定位、层级定位等。 元素定位方式 id...

网友评论

      本文标题:定位与层级

      本文链接:https://www.haomeiwen.com/subject/lxhpgftx.html