11-4定位的小应用（京东）

最新推荐文章于 2023-11-26 00:42:16 发布

学学学无止境

最新推荐文章于 2023-11-26 00:42:16 发布

阅读量89

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_46872121/article/details/110139035

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .img-lists{
            width: 1180px;
            height: 940px;
            margin:100px auto;
            position: relative;
        }
        .img-lists li{
            /*width: 100%;
            height: 100%;*/
            position: absolute;
        }
        .img-lists .pointer{
            position: absolute;
            z-index: 999;
            bottom: 20px;
        }
        .img-lists .pointer a{
            float:left;
            width: 30px;
            height: 30px;
            background-color: red;
            border-radius: 50%;
            margin:0 10px;
            /*padding:1px;*/
        }
        .img-lists a:hover{
            background-color: #fff;
        }
    </style>
</head>
<body>
    <ul class="img-lists">
        <li><a href="#"><img src="img/1.jpg"></a></li>
        <li><a href="#"><img src="img/2.jpg"></a></li>
        <li><a href="#"><img src="img/3.jpg"></a></li>
        <li><a href="#"><img src="img/5.jpg"></a></li>
        <li><a href="#"><img src="img/6.jpg"></a></li>
        <li><a href="#"><img src="img/7.jpg"></a></li>
        <div class="pointer">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </ul>
</body>
</html>

//总结：
  1.利用自绝父相的定位原理
  2.当ul的子元素离和div.pointer都设置了绝对定位之后，它们都会脱离文档流，此时它们的层级是一样的
    因此需要给pointer设置z-index为9999，即永远覆盖在表层
  3.由于pointer设置可绝对定位，此时其div性质发生变化，但注意并不是a发生变化，因此不需要给pointer设置w和h，设置a的即可撑起其父元素pointer
  4.同理，给li元素设置了绝对定位，那么li元素性质发生变化，不用为其设置w和h，其具体大小被其子元素img撑开

学学学无止境

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11-4定位的小应用（京东）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/rese
复制链接

扫一扫