定位叠放次序及特殊性

最新推荐文章于 2023-04-12 15:48:07 发布

昱晟168

最新推荐文章于 2023-04-12 15:48:07 发布

阅读量854

点赞数

分类专栏： htmlcss中定位文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_47267628/article/details/122160042

版权

htmlcss中定位专栏收录该内容

6 篇文章 1 订阅

订阅专栏

定位叠放次序 z-index

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

语法：

选择器 {z-index: 1;}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .myDiv {
    /*  所有的盒子都有定位*/
      position: absolute;
      width: 200px;
      height: 200px;
    }
    /*如果所有盒子没有定位叠放的次序，则以后面写的居上*/
    /*加入定位叠放次序，数值越大，越靠上*/
    .dome1 {
      z-index: 8;/*注意不能跟单位*/
      top: 10px;
      left: 10px;
      background-color: #ff7c2d;
    }
    .dome2 {
      z-index: 5;
      top: 20px;
      left: 20px;
      background-color: red;
    }
    .dome3 {
      z-index: 3;
      top: 30px;
      left: 30px;
      background-color: blue;
    }
  </style>
</head>
<body>
<div class="myDiv dome1"></div>
<div class="myDiv dome2"></div>
<div class="myDiv dome3"></div>
</body>
</html>

盒子只有定位，没有叠放次序：
在这里插入图片描述
盒子添加叠放次序

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto;水平居中，但是可以通过以下主版方法实现和垂直居中。

left: 50%;让盒子的左侧移动到父级元素的水平中心位置
margin-left: -100px;让盒子向左移动自身宽度的一半

注意：绝对定位和固定定位的盒子居中不能通连margin: 0 auto;实现。

相对定位是可以margin: 0 auto;设置水平居中，因为相对定位没有脱离标准流，标准流是可以通过此方式设置水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
/*  如何让绝对定位的盒子居中
    1.让盒子left走到50%，水平的中间
    2.margin-left:再走盒子的一半
*/
    .myDiv1 {
      position: absolute;
      left: 50%;
      margin-left: -100px;
      width: 200px;
      height: 200px;
      background-color: #ff7c2d;
    }
  /*如何盒子水平垂直居中*/
  .myDiv2 {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    width: 200px;
    height: 200px;
    background-color: red;
  }
  </style>
</head>
<body>
<div class="myDiv1">水平居中</div>
<div class="myDiv2">水平垂直居中</div>
</body>
</html>

定位特殊特性

绝对定位和固定定位也和浮动类似

行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
浮动元素，绝对定位，固定定位的元素的都不会出现边距合并的问题（就是边距塌陷）

所以说：边距塌陷是标准流才会出现的问题

绝对定位和固定定位会完全压住盒子

浮动元素不同，只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（或者图上）

但是绝对定位和固定定位会压住下面标准流所有的内容

浮动之所以不会压住文字，因为浮动产生的最初是为了做文字环绕效果的，文字会围绕浮动元素

验证浮动是：不会压住下面标准流的文字和图片,只会压住它下面标准流的盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .myDiv {
      /*验证浮动：是不会压住文字，只会压住下面标准流的盒子*/
     float: left;
      height: 200px;
      width: 200px;
      background-color: #ff7c2d;
    }
  </style>
</head>
<body>
<div class="myDiv">海康</div>
<p>绝对定位和固定定位会压住盒子</p>
</body>
</html>

在这里插入图片描述
验证绝对定位和固定定位：是会压住盒子下面的所有内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*.myDiv {*/
    /*  !*验证浮动：是不会压住文字，只会压住下面标准流的盒子*!*/
    /* float: left;*/
    /*  height: 200px;*/
    /*  width: 200px;*/
    /*  background-color: #ff7c2d;*/
    /*}*/
    .myDiv {
    /*  验证绝对定位和固定定位：是会压住盒子下面的所有内容*/
    /*  position: fixed;*/
      position: absolute;
      height: 200px;
      width: 200px;
      background-color: #ff7c2d;
    }
  </style>
</head>
<body>
<div class="myDiv">海康</div>
<p>绝对定位和固定定位会压住盒子</p>
</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>淘宝轮播图做法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }

        .tb-promo img {
            width: 520px;
            height: 280px;
        }

        /* 并集选择器可以集体声明相同的样式 */
        .prev,
        .next {
            position: absolute;
            /* 绝对定位的盒子垂直居中 */
            top: 50%;
            margin-top: -15px;
            /* 加了绝对定位的盒子可以直接设置高度和宽度 */
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
        }

        .prev {
            left: 0;
            /* border-radius: 15px; */
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .next {
            /* 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 同理  top  bottom  会执行 top */
            right: 0;
            /* border-radius: 15px; */
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        .promo-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            /* background-color: pink; */
            background: rgba(255,255,255, .3);
            border-radius: 7px;
        }
        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
        }
        /* 不要忘记选择器权重的问题 */
       .promo-nav .selected {
            background-color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="images/tb.jpg" alt="">
        <!-- 左侧按钮箭头 -->
        <a href="#" class="prev"> &lt; </a>
        <!-- 右侧按钮箭头 -->
        <a href="#" class="next"> &gt; </a>
        <!-- 小圆点 -->
        <ul class="promo-nav">
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述

昱晟168

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位叠放次序及特殊性

定位叠放次序 z-index在使用定位布局时，可能出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）语法：选择器 {z-index: 1;}数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位只有定位的盒子才有z-index属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
复制链接

扫一扫