020定位的拓展-CSDN博客

本文链接：https://blog.csdn.net/hyc_cheng/article/details/123424307

本文详细介绍了CSS中的定位特性，包括z-index属性用于控制重叠元素的前后次序，如何通过left和margin-left实现绝对定位元素的水平居中，以及绝对定位和固定定位的特殊特性，如不触发外边距塌陷和完全覆盖内容。同时，文章通过实例展示了文字环绕效果的实现。

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

一、定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

语法：

选择器 { z-index: 1; }

数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            text-align: center;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
</body>
</html>

在这里插入图片描述
上面是标准流正常三个盒子的排列方式，如果此时给三个盒子都加上固定定位，会发生什么情况呢？？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /* 给三个盒子都加上固定定位 */
            position: fixed;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            text-align: center;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
</body>
</html>

在这里插入图片描述
发现三个盒子重叠在一起了，并且最后面的盒子显示在最上面，如果此时想要指定的盒子box2显示在最上面，则需要给box2添加z-index属性

.box2{
            background-color: green;
            z-index: 1;
        }

效果如图：
在这里插入图片描述

二、绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;：让盒子向左移动自身宽度的一半。

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

    <style>
        .box{
            /* 加了绝对定位的盒子实现水平居中 */
            position:absolute;
            top: 0;
            left: 50%;
            margin-left: -400px;

            width: 800px;
            height: 400px;
            background-color: #ce4433;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

三、定位特殊特性

绝对定位和固定定位也和浮动类似。
1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

四、脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

五、绝对定位(固定定位)会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
在这里插入图片描述

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字环绕效果</title>

    <style>
        .box img{
            float: right;
        }
    </style>

</head>
<body>
    <div class="box">
        <img src="https://bkimg.cdn.bcebos.com/pic/29381f30e924b89950645a3d63061d950a7bf65f?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto" alt="">
        <p>德怀恩·韦德（Dwyane Wade），1982年1月17日出生于美国伊利诺伊州芝加哥，前美国职业篮球运动员，司职得分后卫，绰号“闪电侠”（The Flash）。</p>
        <p>德怀恩·韦德在2003年NBA选秀中于首轮第五顺位被迈阿密热火队选中，从而进入NBA。2006年，韦德夺得生涯第一座NBA总冠军，并且荣膺NBA历史上第五年轻总决赛MVP（FMVP）。2008年，韦德代表美国男篮夺得北京奥运会金牌。2011-14年间，韦德帮助热火队四次进入NBA总决赛，并在中间在2012-13年2个赛季取得连冠。2016年7月7日，韦德加盟芝加哥公牛队。 [95]  2017年9月27日，韦德加盟克利夫兰骑士队。2018年2月9日，韦德重回热火队。韦德的职业生涯在2005-16年连续12次入选NBA全明星阵容并在2010年荣膺NBA全明星MVP，8次入选NBA最佳阵容（2次一阵，3次二阵，3次三阵），3次入选NBA最佳防守阵容二阵，2009年荣膺NBA得分王，2006-07年连续2次夺得NBA全明星技巧挑战赛冠军，2018-19赛季第13次入选NBA全明星阵容。</p>
        <p>2019年4月11日，韦德在完成职业生涯的最后一场比赛后宣布退役。2020年2月23日，热火队为韦德举办了3号球衣退役仪式。 [3]  2021年4月，韦德成为犹他爵士队股东。</p>
        <p>德怀恩·韦德擅长欧洲步（迷踪步），突破犀利，喜欢背身单打，年轻时是NBA联盟中运球过人速度最快的球员之一。</p>
    </div>
</body>
</html>

在这里插入图片描述