美文网首页
定位与层级

定位与层级

作者: 沙子_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中无法测试
    

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

    相关文章

      网友评论

          本文标题:定位与层级

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