前端基础(十三)_定位position、定位层级z-index

已于 2023-03-07 17:54:02 修改
阅读量1.6k 收藏 3
点赞数 3
分类专栏： # 前端基础（html、css） 文章标签： 前端 css css3 定位position z-index
于 2022-12-20 18:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43291759/article/details/128384611
版权

一、定位position

Css的定位机制：普通文档流、浮动、定位

这里主要介绍CSS的定位属性：position：
1、定位原理：允许元素相对于正常位置、或者相对于父元素、浏览器窗口本上的位置
2、元素位置的调整： left|right属性、top|bottom属性 偏移属性实现元素的位置改变
3、定位偏移属性：
left:0; right:0; 水平方向偏移量设置
top:0; bottom:0; 垂直方向偏移量设置

1、定位属性：

1.1、静态定位position:static; 默认值

相当于没定位，元素出现在正常文档流当中
默认当我们不写position属性的时候，会按照正常文档流进行排版，块元素占一行，行内元素并排一行

1.2、相对定位position:relative;

1、相对于本身的位置进行定位、原来位置占位（不脱标，老家留坑，别人不会把他的位置挤掉）；
2、作为绝对定位的参考元素一般用于元素的微调；
3、作为绝对定位的参考元素

例子：
不使用相对定位
在这里插入图片描述

<!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>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      line-height: 40px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox">
      我是smallBox盒子
    </div>
  </div>
</body>

</html>

使用相对定位，向右偏移20px(left)，向下偏移50px(top)
在这里插入图片描述

<!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>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      line-height: 40px;
      font-weight: bold;

      position: relative;
      top: 50px;
      left: 20px;

    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox">
      我是smallBox盒子
    </div>
  </div>
</body>

</html>

1.3、绝对定位position:absolute;

相对于最近的定位父级元素定位

特点：
1、使元素完全脱离正常文档流 不占位
2、有定位父级相当于定位父级发生偏移，如果没有父级，相对于整个文档发生偏移
3、使行级元素支持宽高；没有设置宽度的块级元素宽度自适应
4、提升层级
5、当定位偏移量（top:0;left:0;）是在父级的左上角

绝对定位步骤！！！： 子绝父相
1、为要做特殊定位的盒子（定位盒）添加position：absolute;
2、绝对定位设置初始位置，通过left|right属性、top|bottom属性：
3、为定位盒的父级盒（有固定宽度和高度的），添加position:relative;相对定位
4、回到定位盒，通过top|bottom、right|left 属性 做精确定位

相对定位 不脱离文档流 原来位置占位；绝对定位 脱离文档流 不占位；设置定位top|bottom、right|left 可以left：auto 自动 用于上一个已经总体定位 另一个auto

未使用绝对定位例子：
在这里插入图片描述

<!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>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;

      position: relative;
      top: 50px;
      left: 20px;

    }

    .smallBoxCenter {
      border: 1px solid pink;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox">
      我是smallBox盒子
      <div class="smallBoxCenter">
        我是smallBoxCenter盒子
      </div>
    </div>
  </div>
</body>

</html>

使用绝对定位例子：
首先看看只设置绝对定位top为0的时候

 position: absolute;
 top: 0;

在这里插入图片描述
位置覆盖了原本的第一行文本说明当前盒子脱离文档流
向上移动30px向左移动10px
在这里插入图片描述

<!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>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;

      position: relative;
      top: 50px;
      left: 20px;

    }

    .smallBoxCenter {
      border: 1px solid pink;
      position: absolute;
      top: -30px;
      left: -10px;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox">
      我是smallBox盒子
      <div class="smallBoxCenter">
        我是smallBoxCenter盒子
      </div>
    </div>
  </div>
</body>

</html>

1.4、固定定位position:fixed；

特点：
1、相对于浏览器窗口进行的定位
2、脱离正常文档流 不占位
3、始终相对于浏览器的四个角为原点进行定位。不会随页面内容滚动儿滚动
4、可以使行级元素支持宽高：没有设置宽度的块级元素宽度自适应
5、可以提升层级

例子：
在这里插入图片描述

<!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>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;

      position: relative;
      top: 50px;
      left: 20px;

    }

    .smallBoxCenter {
      border: 1px solid pink;
      position: fixed;
      top: 30px;
      right: 10px;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox">
      我是smallBox盒子
      <div class="smallBoxCenter">
        我是smallBoxCenter盒子
      </div>
    </div>
  </div>
</body>

</html>

总结：

绝对定位：元素不占位 相对于定位父级盒
固定定位：元素不占位置 相对于浏览器四个角来定位
相对定位：元素占位 相对于元素本身的位置来定位
静态定位：默认 相当于没有定位 元素占位

定位层级z-index

z-index属性：定位盒叠放次序的调整，z-index属性值越大。叠放次序越高值可能为：正整数 负整数 0（默认值）

注意：
1、只对定位元素生效；
2、数值越大叠放次序越高；
3、如果取值相同 则根据书写顺序 后来居上；
4、正值向上调整层级 负值向下调整层级；
5、属性值没有单位；

例子：
在这里插入图片描述

<!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>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      position: relative;
      top: 50px;
      left: 20px;
      background-color: yellow;
    }

    .smallBoxCenter {
      border: 1px solid pink;
      position: relative;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox">
      我是smallBox盒子
    </div>
    <div class="smallBoxCenter">
      我是smallBoxCenter盒子
    </div>
  </div>
</body>

</html>

给被覆盖的盒子正价z-index属性
在这里插入图片描述

    .smallBox {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      position: relative;
      top: 50px;
      left: 20px;
      background-color: yellow;
      z-index: 1;
    }
六卿
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS教程:网页布局定位及z-index解释
12-11
声明 定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。平台：win/IE win/FF z-index 用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序 值：auto | 整数 | inherit默认：auto适用于：定位元素继承性：no 理解stacking context 每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking context，其他stacking context由定位元素设置z-index为非auto时产生。如#d
前端中z-index层叠等级属性是什么意思？
zy1992As的博客
05-30 161
请注意，z-index属性只在具有定位(position)属性的元素上生效，如position: absolute、position: relative或position: fixed。如果元素没有显式地设置z-index值，则其默认值为auto，这意味着元素将遵循其在HTML结构中的出现顺序。box1元素具有最低的z-index值，box3元素具有最高的z-index值。它定义了元素在叠加层中的顺序，具有较高z-index值的元素将位于较低z-index值的元素之上。
CSS3笔记之定位篇（二）z-index，作为前端程序员都应掌握
最新发布
jixuczy的博客
03-27 822
background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block–> z-index:auto或z-index:0，不依赖z-index的层叠上下文 --> 正z-index不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别；依赖z-index值创建层叠上下文的情况：position值为relative/absolute或fixed（部分浏览器）
css定位position引发的层级关系问题详解
01-21
position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。 relative：相对定位，相对自己原来的位置进行定位 fixed：绝对定位，相对浏览器窗口进行定位(fixed定位会让元素一直处于浏览器某个位置，不会随着滚动条滚动而变化) 由position引起的层级关系问题 首先我们要知道，css属性其实是一个立体空间有x，y，z轴，但是只有我们使用了position定位时，z轴上的层级关系才体现出来，即z-in
CSS 定位之 z-index 问题分析
01-19
关于z-index，目前遇到的一些问题 1. 某些浏览器下元素层级遮盖存在bug; 2. 某个元素z-index设的太大，导致始终无法被遮盖; 3. js动态计算z-index，导致元素覆盖关系部可控   层级遮盖bug出现的原因： IE6/7对z-index的表现跟IE8及以上浏览器不一致。position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto的元素不参与堆叠优先级比较。 ff/chrome z-index IE6/7 IE8/9 不设置 0 auto au
CSS3笔记之定位篇（二）z-index，前端面试题汇总，看完必懂
m0_61331237的博客
03-18 800
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
从头学前端-32：定位（position属性详解）
一碗周
12-07 2518
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第三十二篇-《定位》 本系列文章在掘金首发，编写不易转载请获得允许 本篇文章将来学习CSS中的定位，本篇文章的内容大纲如下： 概述 CSS中的定位的实现是通过position属性实现的，关于定位的名词有如下几个： 定位元素：position属性为relative，absolute，fixed或sticky的元素 相对定位元素：position属性为relative的元素.
前端基础：CSS的定位position（开发常用）
weixin_49555741的博客
03-21 1222
使用场景： 盒子固定在屏幕的某个位置、 盒子自由移动位置 压住其他的盒子
css：四种定位（position)以及z-index层级
YangLu888
10-08 1720
css的四种定位以及z-index层级调整
position定位及z-index的使用
BigDaddy233333的博客
11-10 1045
使用前提 z-index只能在position属性值为relative或absolute或fixed的元素上有效。 基本原理 z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。 使用的相对性 z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆...
前端 position定位
qq_44327851的博客
12-25 999
绝对定位的元素的位置是相对于它最近的已定位祖先元素（定位属性值为除 "static" 以外的任何值），如果没有祖先元素是已定位的，则相对于文档的 body 元素。注意：当相对定位的元素发生偏移后，原先在这个元素下面的其他元素会被覆盖，但是从文档流的角度，相对定位的元素仍然在原来的位置上，因此，后面的元素不会根据它进行布局。当元素在滚动到特定位置时，它将根据设置的 "top", "right", "bottom", "left" 值进行定位，直到滚动到另一个设定的位置，然后保持其位置不变。
CSS z-index 层级关系优先级的概念
12-13
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...
z-index
EmotionComputer
08-08 396
在css2.1时代，z-index只有配合定位属性才能够起作用，如position: absolute position:relative position:fixed,当然在最新的position: sticky也起作用。 在css3时代，z-index还可以应用在过渡动画上，比如： @keyframes zindex { 0% { z-index: -1;} 100% { z-index: 50; } } css 中的层叠上下文和层叠水平 ...
前端开发z-index的使用技巧：一文详解
前端开发UI设计老司机-艾斯视觉
03-04 925
本文详细介绍了z-index的使用技巧，包括基本概念、基本用法和高级技巧。掌握这些知识可以帮助你更有效地使用z-index属性，创造出富有层次感、立体感的网页布局。在实际开发过程中，请根据具体需求灵活运用这些技巧，避免陷入z-index陷阱。hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!
块元素居中方式
gklcsdn的博客
12-10 718
<!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-...
详解CSS的z-index属性（带图片解析）
编程小石头
11-02 8481
个人总结的CSS的z-index属性，很通俗易懂，有图解说明。
深入理解css中position属性及z-index属性
GZAY的博客
02-14 3229
深入理解css中position属性及z-index属性 原文链接 在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。 第一部分：posit...
【CSS】position 定位 和 z-index 层级
qq_45677671的博客
12-28 2304
position概述相对定位：relative绝对定位：absolute固定定位：fixed粘性定位：sticky 概述 position属性用于指定一个元素在文档中的定位方式。 top，right，bottom 和 left 属性则决定了该元素的最终位置。 语法： position：static/absolute/relative/fixed/sticky； 说明： static（默认值）： 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父
position定位 有很多重叠 z-index，怎么合理管理层级关系 z-index？
04-04
在管理层级关系 z-index 时，可以遵循以下几个原则： 1. 确定最高层级元素：将最高层级元素的 z-index 设为最大值，例如 99999。 2. 避免使用负值：将元素的 z-index 设为负值可能会导致意外的覆盖，因此应该尽量避免使用负值。 3. 合理使用层级关系：在相同层级的元素中，可以通过调整它们的 z-index 值来控制它们的显示顺序。在不同层级的元素中，应该根据需要将它们分别分配到不同的层级中。 4. 避免过度使用层级关系：层级关系越复杂，越容易出现问题，因此应该尽量避免过度使用层级关系。 5. 使用 z-index 缩写：可以使用 z-index 缩写来简化代码，例如将 z-index: 1; 改写为 z-index: auto 1;。这样可以避免忘记设置 z-index 值，同时也可以方便地管理层级关系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六卿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值