0019 认识css 标签 定位position 轮播图实现

目录

1.定位的相关问题，  对于浮动文档流和clear的功能都是属于在同行范围的调整，定位则是在整个页面的调整盒子的功能

4种定位方式：  
    
    静态定位 static  默认是静态定位
    
    相对定位 relative  
         相对定位 可以类比成相对路径理解，在已有的基础进行移动，而原来所占用的空间不会变化，参照物是自己本身，不会脱离文档流。
         
         
    绝对定位 absolute
            绝对定位 类比的对象为继承的子类，寻找父类的类属性，绝对定位的参照物就是上级标签的position，一直寻找到body标签。
            
            
    固定定位 fixed


  参数 left  right top  bottom 
       左     右   上    下    4个边框的距离

相对定位

    相对定位 relative  
         相对定位 可以类比成相对路径理解，在已有的基础进行移动，而原来所占用的空间不会变化，参照物是自己本身，不会脱离文档流。

image-20230306215454364

image-20230306215616922

绝对定位

    绝对定位 absolute
            绝对定位 类比的对象为继承的子类，寻找父类的类属性，绝对定位的参照物就是上级标签的position，一直寻找到body标签。但是脱离了文档流
图1 ：  c2 的父级标签没有定位信息，自动寻找上层标签的定位，最后以body标签的位置，

image-20230306220314596

如何设置父级标签固定position为相对定位 ，子标签使用绝对定位，在父标签内左右移动

image-20230306221522037

定位应用之 轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东轮播图</title>

    <style>
        * {
            /*设置全部的标签 内边距和外边距为0*/
            margin: 0;
            padding: 0;
        }


        .head {

            width: 590px;
            height: 470px;
            border: red 1px solid;

            /*设置div标签在这个标签在整个页面的位置  */
            margin: 100px auto;

            /*设置绝对定位，为后代标签的相对定位提供参考值*/
            position: relative;
        }

        .head .imgs,.btn{
            /*去除无序列表的自带的样式*/
            list-style-type: none;

        }

        .head .imgs li{
            /*为图片标签设置，绝对标签，让图片脱离文档流*/
            position: absolute;
            left: 0;
            top: 0;
            /*设置标签的层级值，脱离文档流的标签根据排布的顺序，后面的要覆盖前面的，为了让左右的箭头标签一致存在图片的上面，*/
            /*设置的级别要比 箭头的标签要低一点*/
            z-index: 20;
        }


       .head .btn .left_btn {
            position: absolute;
           top: 50%;
           left: 0;
           z-index: 21;


        }
       .head .btn .right_btn {
            position: absolute;
           top: 50%;
           right: 0;
           z-index: 21;
        }
       .head .btn div{
           width: 50px;
           height: 50px;
           font-size: 20px;
           color: orange;

           /*设置文本纵向和垂直居中*/
           line-height: 50px;
           text-align: center;
           background-color: grey;

           /*设置边框的圆润度*/
           border-radius: 35%;

           /*两个箭头的标签，设置的定位距离上面的边框为50%，是以当前标签的上面边框为基准，不够精确，要减去当前标签的二分之一的高度，才算是中间。*/
           margin-top: -30px;


       }

    </style>

</head>
<body>


<div class="head">
        <ul class="btn">
        <li class="left_btn">  <div>< </div> </li>
        <li class="right_btn"> <div>> </div>  </li>
    </ul>

    <ul class="imgs">
        <li ><img src="./imgs/2.jpg" alt=""></li>
        <li><img src="./imgs/1.jpg" alt=""></li>
    </ul>



</div>


</body>
</html>

image-20230306235031551

固定定位 -- 适用场景 返回顶部 客服图标 小窗口视频播放等

定位效果 fixed  完全脱离文档流 以整个显示的页面窗口为参照物。 方向也是4个 上下左右

image-20230307000511924

posted @ 2023-03-07 17:53  mmszxc  阅读(122)  评论(0)    收藏  举报