day70-CSS-position定位,z-index

1. 定位(position)
    1.1 static
        static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

    1.2 relative(相对定位)
        对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
        注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。

    1.3 absolute(绝对定位)
        重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。
        这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;
        然后Top、Right、Bottom、Left用百分比宽度表示。
        另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

    1.4 fixed(固定)
        fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。
        而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。
        这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
        在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

    示例:返回顶部按钮
        <div class="fixed-test">返回顶部</div>

        .fixed-test{
                position:fixed;
                right:20px;
                bottom:20px;
                background:grey;
            }

2. z-index 设置对象的层叠顺序。
    2.1 z-index 值表示谁压着谁,数值大的压盖住数值小的。
    2.2 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index。
    2.3 z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,
        那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
    示例1:
    <body>
            <div class="c1"></div>
            <div class="c2"></div>
    </body>

    .c1{
            width:150px;
            height:150px;
            background-color:red;
            position:relative;    /*z-index必须作用于定位过的元素,哪怕没有top right bottom left值*/
            z-index:2;        /*2比c2的0要大,所以可以压着c2*/
        }
    .c2{
            width:200px;
            height:200px;
            background-color:green;
            position:relative;
            top:-150px;
            z-index:0;        /*默认值是0,不写也可以*/
        }
<img alt="" old-src="https://img2018.cnblogs.com/blog/1586093/202002/1586093-20200229181312202-914967433.png"></img>
    示例2:模态框示例,点击链接或者图片,弹出登录或者注册的界面,背景颜色变得透明。
    <body>
            <div class="c1"></div>
            <div class="c2"></div>
    </body>

    .c1{
            background-color:rgba(0,0,0,0.5);
            position:fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;        /*top right bottom left都是0就把背景布满整个页面*/
            z-index:0;        /*z-index:0比c2的z-index:1要小,所以被压住*/
        }
    .c2{
            background-color:white;
            width:600px;
            height:400px;
            position:fixed;
            top:50%;
            left:50%;
            margin:-200px 0 0 -300px;    /*向上移动200,向左移动300,也就是宽高的一半,才能居中*/
            z-index:1;
        }
<img alt="" old-src="https://img2018.cnblogs.com/blog/1586093/202002/1586093-20200229181350592-912267058.png"></img><img alt="" old-src="https://img2018.cnblogs.com/blog/1586093/202002/1586093-20200229181407642-1564477877.png"></img>
3. opacity 改变标签所有元素的透明度,而rgba只改变背景透明度。取值范围是0~1,0是完全透明,1是完全不透明。
    div{ opacity : 0.5 }

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。