绝对定位元素的布局，元素层级，练习轮播图

最新推荐文章于 2024-03-06 09:03:31 发布

Xiaoweidumpb

最新推荐文章于 2024-03-06 09:03:31 发布

阅读量177

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_43751489/article/details/120973869

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文深入探讨了CSS中的绝对定位元素布局，详细解析了水平和垂直方向上的布局原理，以及如何通过margin和left/right属性进行居中对齐。同时，介绍了元素层级的概念，通过z-index属性控制不同定位元素的显示优先级。最后，通过实例展示了使用这些技术实现轮播图的基本结构，包括图片切换和导航点的设计。

摘要由CSDN通过智能技术生成

绝对定位元素的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: #bfa;

            position: relative;
        }

        .box2{
            width: 100px;
            /* width: auto; */
            height: 100px;
            background-color: orange;
            position: absolute;
            margin: auto;
            /* 
                水平布局
                    left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度

                - 当我们开启了绝对定位后:
                    水平方向的布局等式就需要添加left 和 right 两个值
                        此时规则和之前一样只是多添加了两个值：
                            当发生过度约束：
                                如果9个值中没有 auto 则自动调整right值以使等式满足
                                如果有auto，则自动调整auto的值以使等式满足

                        - 可设置auto的值
                            margin width left right

                        - 因为left 和 right的值默认是auto，所以如果不指定left和right
                            则等式不满足时，会自动调整这两个值

                        - PS↑: 盒子的水平布局，没有auto时，margin默认为‘-’不是atuo，默认调节margin-right。
                                             margin-left\right都为auto时，margin-left=margin-right,元素可以居中。
                              绝对定位的布局，没有auto时，right\left默认为‘XXX px’，默认调节right。
                                             right\left都为auto时，left=0，right=auto，margin-right\left=0,元素还是靠左.
                                             
                              所以，并不是right和left比margin-right\left级别高优先级调节它，而是因为right、left默认时auto，margin默认不是auto。

                    垂直方向布局的等式的也必须要满足
                        top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度

                    
                        
             */

             left: 0;
             right: 0;

             top: 0;
             bottom: 0;
        }
    </style>
</head>
<body>

<div class="box1">
    <div class="box2"></div>
</div>
    
</body>
</html>

元素层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: absolute;
            /* 
                对于开启了定位元素，可以通过z-index属性来指定元素的层级
                    z-index需要一个整数作为参数，值越大元素的层级越高
                        元素的层级越高越优先显示

                    如果元素的层级一样，则优先显示靠下的元素

                    祖先的元素的层级再高也不会盖住后代元素
             */
             /* z-index: 3; */
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: rgba(255 , 0, 0, .3);
            position: absolute;
            top: 50px;
            left: 50px;
            /* z-index: 3; */

        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 3;

        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
        }
    </style>
</head>
<body>

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4">4</div>
    </div>

    
</body>
</html>

在这里插入图片描述

练习轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        /* 设置图片的容器 */
        .img-list{
            width: 590px;
            height: 470px;
            margin: 100px auto;

/* 
            为ul开启相对定位，目的是使ul中的pointer可以相对于ul定位而不是相对于初始包含块（html）去定位
 */
            position: relative;

        }

        /* 设置li */
        .img-list li{
            position: absolute;
        }

        /* 通过修改元素的层级来显示指定的图片 */
        .img-list li:nth-child(2){
            z-index: 1;
        }


        /* 设置导航点的样式 */
        .pointer{
            position: absolute;
            z-index: 9999;
            bottom: 20px;
            left: 40px;
        }

        .pointer a{
            /* 设置元素向左浮动 */
            float: left;
            width: 10px;
            height: 10px;
            margin: 0px 2px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, .3);
            /* 将背景颜色值设置到内容区，边框和内边距不在有背景颜色 */
            background-clip: content-box;
            border: 2px solid transparent;
        }

        .pointer a.active,
        .pointer a:hover{
            background-color: #fff;
            border: 2px solid  rgba(255, 255, 255, .3);
        }


    </style>
</head>
<body>
    <ul class="img-list">
        <li><a href="javascript:;"><img src="./img/05/1.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/05/2.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/05/3.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/05/4.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/05/5.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/05/6.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/05/7.jpg"></a></li>
        <li><a href="javascript:;"><img src="./img/05/8.jpg"></a></li>

        <div class="pointer">
            <a class="active" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </ul>
</body>
</html>