首页 > 其他分享 >深入理解css 笔记(7)

深入理解css 笔记(7)

时间:2022-10-31 14:13:30浏览次数:63  
标签:index 层叠 定位 元素 笔记 深入 盒子 上下文 css

  前面讲了几种控制网页布局的方式,flex,gird 和 float。这下我们初略讲下 position.这个我日常中用到的已经挺多了。定位和其他控制文档流的行为不同。它将元素彻底从文档流中移走,它允许你将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面,彼此重叠。

  浏览器将 html 解析为 dom 的同时还创建了另一个树形结构,叫做渲染树。它代表了每个元素的视觉样式和位置。同时还决定浏览器绘制元素的顺序。顺序很重要,因为如果元素刚好重叠,后绘制的元素就会出现在先绘制的元素前面。通常情况下。元素在 html 里出现的顺序决定了绘制的顺序。定位元素时,这种行为会改变。浏览器会先绘制所有非定位的元素,然后绘制定位元素。

  默认情况下,所有的定位元素会出现在非定位元素前面。z-index 属性的值可以是任意整数正负都行。拥有较高 z-index 的元素出现在拥有较低 z-index 的元素前面。拥有负数 z-index 的元素会出现在静态元素后面。使用 z-index 是解决网页叠层问题的第二个方法。z-index 的行为很好理解,但是使用它时要注意两个小陷阱。第一,z-index 只在定位元素上生效,不能用它控制静态元素。第二,给一个定位元素加上 z-index 可以创建层叠上下文。

  一个层叠上下文包含一个元素或者由浏览器一起绘制的一组元素。其中一个元素会作为层叠上下文的根,比如给一个定位元素加上 z-index 的时候,它就变成了一个新的层叠上下文的根。所有后代元素就是这个层叠上下文的一部分。将层叠上下文里所有元素一起绘制会造成严重的后果:层叠上下文之外的元素无法放在层叠上下文内的两个元素之间。举个例子:

<!DOCTYPE html>
<html lang="cn" class="has-bottombar">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
      name="viewport"
    />
    <style>
      body {
        margin: 40px;
      }

      .box {
        display: inline-block;
        width: 200px;
        line-height: 200px;
        text-align: 200px;
        border: 2px solid black;
        background-color: #ea5;
        margin-left: -60px;
        vertical-align: top;
      }

      .one {
        margin-left: 0;
      }

      .two {
        margin-top: 30px;
      }

      .three {
        margin-top: 60px;
      }

      .positioned {
        position: relative;
        background-color: #5ae;
        z-index: 1;
      }

      .absolute {
        position: absolute;
        top: 1em;
        right: 1em;
        height: 2em;
        background-color: #fff;
        border: 2px dashed #888;
        z-index: 100;
        line-height: initial;
        padding: 1em;
      }
    </style>
  </head>

  <body>
    <div class="box one positioned">
      one
      <div class="absolute">nested</div>
    </div>
    <div class="box two positioned">tow</div>
    <div class="box three">three</div>
    <script></script>
  </body>
</html>

  这个代码包含了三个盒子,其中两个被定位,并且z-index为1,第一个盒子里有一个绝对定位的元素,它的z-index为100,虽然第一个盒子的z-index很高,但还是出现在第二个盒子后面,因为它的父元素,即第一个盒子形成的层叠上下文在第二个盒子后面。叠放在第二个盒子后面的第一个盒子是一个层叠上下文的根。因此,虽然它的z-index值很高,但它内部的绝对定位元素不会跑到第二个盒子前面。

  给一个定位元素加上z-index是创建层叠上下文最主要的方式,但有些属性也会创建,比如小于1的opacity属性,还有transform,filter属性。由于这些属性主要会影响元素及其子元素渲染的方式,因此一起绘制父子元素。

  如果不根据组件的优先级定义清晰的层叠顺序,那么一个样式表很容易演变成一场z-index大战。如果没有清晰的说明,开发人员在一个模态框之类的元素添加样式时,为了不被其他元素遮挡,就会设置一个高的离谱的z-index.这种事情重复几次后,大家就只能凭感觉给一个新的组件设置z-index.所以我们最好建立一个自定义属性文件,就能很方便的处理这个问题。将增量设为100,10,这样就可以在需要的时候往中间插入新值。

  如果发现z-index没有按照预期表现,就在dom树里往上找到元素的祖先节点,直到发现层叠上下文的根,然后给它设置z-index.

标签:index,层叠,定位,元素,笔记,深入,盒子,上下文,css
From: https://www.cnblogs.com/wlxll/p/16844029.html

相关文章

  • 狂神说mybatis笔记
    1、简介1.1什么是mybatisMyBatis是一款优秀的持久层框架它支持自定义SQL、存储过程以及高级映射MyBatis免除了几乎所有的JDBC代码以及设置参数和获取结果集的工......
  • 前端基础7天快速入门——狂神说css笔记
    1、css的3种导入方式优先级:就近原则<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><!--内部样式-->......
  • 前端基础7天快速入门——狂神说html笔记
    网页基本信息<!--DOCTYPE——规范--><!DOCTYPEhtml><htmllang="en"><!--head标签代表网页头部--><head><!--meta描述性标签,它用来描述我们网站的一些信息......
  • 前端基础7天快速入门——狂神说JavaScript笔记
    1、快速入门1.1引入JavaScript内部标签<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><script>aler......
  • 赏金猎人笔记-手动sqli
      声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由用户承担全部法律及连带责任,文章作者不承担任何法律及连带责任。本文选......
  • 赏金猎人笔记-sqli几个小技巧
      几个技巧小结1.查找后台登陆界面:google:“www.target.comlogin”有效率达到60%的一个sqli的payload:2.sqli一个有效载荷:admin'OR1=1--'3.对于类似这种:......
  • vue3笔记
    1.toRefs可以把对象变成响应式对象2.生命周期vue2里面的beforeDestory-->beforeUnmount​ destoryed-->unmounted3.侦测变化-watchwatch()第一个参数是......
  • 赏金猎人笔记-电子邮件中所存在的sqli
      前言本篇文章主要测试的是密码忘记功能;过程我第一次嘗試沒有空格的輸入:[email protected]=>valid“a”@.com=>valid然後用空格:[email protected]=>無效“d......
  • 端口安全学习笔记
    端口安全记录一些端口渗透时的方法和思路免责声明本文档仅供学习和研究使用,请勿使用文中的技术源码用于非法用途,任何人造成的任何负面影响,与本人无关.大纲Tips......
  • 【HDLBits刷题笔记】11 Shift Regiters&More Circuits
    Shift4异步复位同步置数和使能。moduletop_module(inputclk,inputareset,//asyncactive-highresettozeroinputload,inputena,inp......