CSS自学Day7-定位装饰-定位

什么时候养猫猫

已于 2022-09-14 22:56:56 修改

阅读量258

点赞数 1

分类专栏： CSS 文章标签： html css3 前端

于 2022-09-14 22:55:53 首次发布

本文链接：https://blog.csdn.net/m0_64005381/article/details/126844252

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

目标：能够说出定位的常见应用常用，并且能够说出不同定位方式的特点

1.定位的基本介绍

1.1网页常见布局方式

1.标准流

1.块级元素独占一行 -->垂直布局

2.行内元素/行内块元素一行显示多个-->水平布局

2.浮动

1.可以让原本垂直布局的块内元素变成水平布局

3.定位

1.可以让元素自由的摆在网页的任意位置

2.一般用于和盒子之间的层叠情况

1.2定位常见应用场景

1.可以解决盒子之间的层叠问题

定位之后的元素层级最高，可以层叠在其他盒子上面

2.可以让盒子始终固定在屏幕中的某个位置

2.1定位初体验

1.需求：页面中两个盒子，要求完成图片效果，如何完成？

针对于盒子与盒子之间的层叠问题，推荐使用定位完成

2.2使用定位的步骤

1.设置定位方式

属性名:position

常见属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2.设置偏移值

1.偏移值设置分为两个方向，水平和垂直向各选一个使用即可

2.选取原则一般就是就近原则（离哪个近用哪一个）

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

静态定位

代码：position：static;

    <style>
        /* css书写：1.定位/浮动/display;2.盒子模型；3.文字属性 */
        .box{
            /* 静态定位，默认值，标准流 */
            position: static;
            left: 100px;
            top: 200px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>

4.1相对定位

介绍：自恋性定位，相对于自己之前的位置进行移动

代码：position：relative;

特点：

1.需要配合方位属性现实移动

2.相对于自己原来位置进行移动

3.在页面中占位置-->没有跳脱

应用场景:

1.配合绝对位置组cp（子绝父相）

2.用于小范围的移动

    <style>
        /* 如果left和right都有，以left为准；top和bottom都有以top为准 */
        /* css书写：1.定位/浮动/display;2.盒子模型；3.文字属性 */
        .box{
            /* 静态定位，默认值，标准流 */
            position: relative;
            left: 100px;
            top: 200px;

              /* 1.占有原来的位置

            2.任然具有标签原本的显示模式特点

            3.改变位置是参照自己原来的位置 */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>

效果图：

注：

/* 1.占有原来的位置

2.任然具有标签原本的显示模式特点

3.改变位置是参照自己原来的位置 */

5.1绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

代码：position:absolute;

特点：

1.需要配合方位属性实现

2.默认相对于浏览器可视区进行移动

3.在页面中不占位置-->脱标

应用场景：

1.配合绝对定位组合cp（子绝父相）

    <style>
        /* css书写：1.定位/浮动/display;2.盒子模型；3.文字属性 */
        .box{
          /* 绝对定位：
          先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位
          有父级，但父级没有定位，以浏览器为参照物进行定位 */
          position: absolute;

          /*1.脱标，不占位
          2.改变标签的显示模式特点：具备行内块的特点（在一行，宽高生效）
           */

          width: 200px;
          height: 200px;
          background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>

效果图：

子绝父相：

   <style>
        .father{
            position: relative;
        
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son{
            /* 相对，绝对定位 */
            /* 父级采用相对定位，子级采用绝对定位--子绝父相 */
            /* position: relative; */
            /* position: absolute; */
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        .sun{
            position: absolute;
            /* left: 20px; */
            /* top: 30px; */
            right: 20px;
            bottom: 50px;

            width: 200px;
            height: 200px;
            background-color: green;
        }

        /* 绝对定位查找父级的方式，就近找定位的父级，如果逐层查找不到这样的父级，那么就以浏览器窗口进行定位 */
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
</body>

（案例）卡片模块的hot图标定位

需求：根据设计图，通过pxcook量取数据，在学成在线网页制作里修改。

效果图：

html：

  <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                        <!-- 定位hot小图 -->
                        <img src="./images/hot.png" alt="" class="hot">
                    </a>
                </li>

css：

/* 课程模块 hot 定位小图 */
.box .content li{
    position: relative
    
}
.box .content li .hot{
    position: absolute;
    right: -4px;
    top: -4px;

}

（案例）子绝父相，让子盒子在父盒子水平居中（父子元素任意宽度下都能实现）

<style>
    .box{
        /* 绝对定位的盒子不能使用左右margin auto 居中*/
        position: absolute;
        /* margin: 0 auto; */
        /*left：50%，整个盒子会移动到浏览器中间偏右的位置  */
        left: 50%;
        /* 把盒子向左移动自己宽度的一半 */
        margin-right: -150px;

        top: 50%;
        margin-top: -150px;

        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
<body>
   <div class="box"></div> 
</body>

位移居中

代码：transform: translate(-50%,-50%);

<style>
    .box{
        /* 绝对定位的盒子不能使用左右margin auto 居中*/
        position: absolute;
        /* margin: 0 auto; */
        /*left：50%，整个盒子会移动到浏览器中间偏右的位置  */
        left: 50%;
        /* 把盒子向左移动自己宽度的一半 */
        /* margin-right: -150px; */

        top: 50%;
        /* margin-top: -150px; */


        /* 位移：自己宽度高度的一半 */
        transform: translate(-50%,-50%);

        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
<body>
   <div class="box"></div> 
</body>

（案例）底部半透明遮罩效果

需求：根据设计图，通过代码在网页中完成一致的效果

注：定位的元素会脱标（如：绝对定位），脱标后的元素宽高默认由内容撑开

效果图：

    <style>
        .banner{
            position: relative;
            margin: 0 auto;
            width: 1226px;
            height: 600px;
        }
        .mask{
            position: absolute;
            left: 0;
            bottom: 0;
            /* 绝对定位拥有行内块的*/
            height: 150px;
            background-color: rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="./images.png" alt="">
        <!-- 遮罩 -->
        <div class="mask"></div>
    </div>
</body>

7.1固定定位

介绍：死心眼型，相对于浏览器进行定位移动

代码：position：fixed；

特点：

1.需要配合方位属性实现移动

2.相对于浏览器可视区域进行移动

3.在页面中不占位置-->已经脱标

应用场景：

1.让盒子固定在屏幕中的某个位置

    <style>
        /* css书写：1.定位/浮动/display;2.盒子模型；3.文字属性 */
        .box{
            position: fixed;
            left: 0;
            top: 0;

            /* 1.脱标不占位置 
            2.改变位置参考浏览器窗口*/

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>

8.1元素的层级问题

不同布局方式元素的层级关系：

标准流<浮动<定位

不同定位之间的层级关系：

1.相对、绝对、固定默认层级相同

2.此时HTML写在下面的元素层级更高，会覆盖上面的元素

    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .one{
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: pink;

            z-index: 999;
        }
        .two{
            position: absolute;
            left: 50px;
            top: 100px;
            background-color: skyblue;
        }


        /* 
        默认情况下定位的盒子，后来者居上
        z-index:整数;取值越大显示顺序越靠上，z-index的默认值是0
        注：z-index必须配合定位才能生效
        */
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two"></div>

</body>