CSS3(3)

当前位置:

首页 > 网站开发 > css >

CSS3(3)

="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>

6.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
       div:nth-of-type(1){ /*绝对定位，相对于浏览器初始位置*/
            width: 100px;
            height: 100px;
            background: #6284FF;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*fixed,固定定位*/
            width: 50px;
            height: 50px;
            background: #2be24e;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

6.4、z-index

图层~

z-index：默认是0，最高无限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/2.jpg" alt=""></li>
        <li class="tipText">大家好</li>
        <li class="tipBg"></li>
        <li>时间：2099-1-1</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>

</body>
</html>

opacity: 0.5;/背景透明度/

#content{
    width: 380px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 200px;
}
.tipBg{
    background: #05e29b;
    opacity: 0.5;/*背景透明度*/
}
.tipText{
    z-index: 999;
}

7、动画

8、总结

本文是学习B站“遇见狂神说”的课程所做的笔记，有需要的可以去B站关注这个宝藏男孩

栏目列表