CSS之--------定位网页元素，网页元素透明度

一.定位（position）

static：无定位的，一般我们是不需要注明的，因为默认就是static；
relative：相对定位，是相对于自己的初始位置来定位的，位置发生偏移后，它的原始位置会被保留下来，如果要使用relative这个属性值，那么就要用到top bottom left right这四个属性值来确定元素的位置；
absolute：绝对定位，能够很准确的将元素移动到指定位置，元素位置发生偏移后，原来的位置不会被保留；
fixed：固定定位，性对浏览器窗口来定位，偏移量不会随滚动条的移动而移动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #first {
            display: block;
            background: deepskyblue;
            position: static;
            border: 1px darkgreen dashed;
        }

        #second {
            display: block;
            background: gold;
            position: relative;
            border: 1px darkmagenta dotted;
            top: -20px;
            left: 20px;
        }

        #third {
            display: block;
            background: cornflowerblue;
            position: fixed;
            border: aquamarine;
            top: 50px;
            left: 40px;
        }
        #forth{
            display: block;
            background: chartreuse;
            position: absolute;
            border: darkorange;
            top: 30px;
            left: 80px;
        }
    </style>
</head>
<body>
<div>
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
    <div id="forth">第四个盒子</div>

</div>


</body>
</html>

在这里插入图片描述

二. z-index属性

调整元素定位时重叠层的上下位置；
z-index的属性值：整数，默认值是0；
设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系；
z-index值大的层位于其值小的层上方；

三. 网页元素透明度

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #first {
            display: block;
            background: deepskyblue;
            position: static;
            border: 1px darkgreen dashed;
        }

        #second {
            opacity: 0.4;
            display: block;
            background: gold;
            position: relative;
            border: 1px darkmagenta dotted;
            top: -20px;
            left: 20px;
            z-index: 80;
        }

        #third {
            display: block;
            background: cornflowerblue;
            position: fixed;
            border: aquamarine;
            top: 50px;
            left: 40px;
        }
        #forth{
            display: block;
            background: chartreuse;
            position: absolute;
            border: darkorange;
            top: 30px;
            left: 80px;
        }
    </style>
</head>
<body>
<div>
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
    <div id="forth">第四个盒子</div>

</div>


</body>
</html>

在这里插入图片描述

CSS之--------定位网页元素，网页元素透明度

一.定位（position）

二. z-index属性

三. 网页元素透明度

猜你喜欢