图解一下啥是CSS堆叠上下文,啥是CSS堆叠层叠顺序,让你对css的疑惑少一点?

2018-10-12 admin

CSS 堆叠上下文是啥?

我们有一个基本样式的 div,样式如下:

div{
    width: 200px;
    height: 200px;
    border:10px solid red;
    padding:15px;
    margin:12px;
}

效果如下:

clipboard.png

这边有个问题是: border 和 background是什么关系 ?

这边有两个选项:

  1. 平行的
  2. border 更靠近用户
  3. background 更靠近用户

你们会选择哪个呢?

其实弄懂这个很简单的,我们只需要把 border 设置成半透明就知道答案啦

border:10px solid rgba(255, 0, 0, 0, .3);

clipboard.png

从运行结果就可以看出,红色透着绿色,所以是 border 更靠近用户 。 这时候你就知道div 不是平的,在垂直屏幕上也是有层次关系的,那这个层次关系就叫做堆叠上下文

接着我们在 div 里面写个 ‘你好,世界’,效果如下:

clipboard.png

这里又引发了一个问题,这个 ‘你好,世界’, 是在哪层了,是在 border 上还是在 border 与 background 之间呢?

这边我们只需要把’你好’移动到border上就可知道原因了,那怎么把文字移动过去呢?这边我们用 text-indent ,样式如下:

div{
  width: 200px;
  height: 200px;
  border:10px solid rgb(255, 0, 0);
  padding:15px;
  margin:12px;
  background-color: green;
  text-indent: -20px;
}

效果如下:

clipboard.png

从运行效果就可以看了,文字是在 border上面的,所以文字区域(内联元素)是更靠近用户的

那如果div 里面还有一个 div 呢?代码结构如下:

 // html
  <div class="parent">
    你好,CSS世界
    <div class="child"></div>
  </div>
    // css
   .parent{
      width: 200px;
      height: 200px;
      border:10px solid rgb(255, 0, 0);
      padding:15px;
      margin:12px;
      background-color: green;
      text-indent: -20px;
    }
    .child{
      height: 20px;
      background:purple;
    }

效果如下:

clipboard.png

又引发了一个问题,紫色区域是比文字区域高还是相反呢?

那怎么验证这个问题了?我们只要把里面的 div 往上移动就行,注意这里不能用 position因为为改变层级结构, 我们只要用 margin-top 就行了,如:

    margin-top:-20px;

效果如下:

clipboard.png

你会发现文字区域是在上面的。这边就得出一个结论:

如果div里面有块级元素,块级元素是盖不住内联元素的,换句话说内联元素离用户更近

那如果里面div有文字呢? 这时我们需要 写几个字,效果如下:

clipboard.png

你会发现 子元素的文字区域会盖住父元素的文字区域,所以这边又有一个小的结论:文字区域后出现的会覆盖前出现的。

浮动元素

来一个基本结构:

  // html
  <div class="parent">
      你好
    <div class="float">

    </div>
  </div>
  // css
.parent{
  width: 200px;
  height: 200px;
  border:10px solid rgb(255, 0, 0);
  padding:15px;
  margin:12px;
  background-color: green;
  color: aliceblue;
}
.float{
  height: 40px;
  width: 40px;
  background:purple;
  float: left;
}

效果如下:

clipboard.png

上面代码就不解释了,你们肯定都 知道 ?按上面的套路,这里同样还是那个问题:你好在上面呢还是这个 float 元素呢?

要验证这个问题,同样使用 text-indent 那文字向左动点,这里我直接 上效果了:

clipboard.png

从效果图,我们可以得出 文字区域是在 浮云元素上面的。

那浮动元素是在 文字区域与内部块级元素之间呢,还是内部块级与border元素之间呢?换句话说就是 浮动元素与块级元素哪个离用户更近?

我们直接在父级元素写一个 child:

   // hmtl
  <div class="parent">
      你好
    <div class="float"></div>
    <div class="child"></div>
  </div>

  // css

 .child{
  height: 20px;
  background: black;
}

效果如下:

clipboard.png

从上可以看出浮云元素盖住了 child元素,说明浮动元素的层级是比块级元素高的。即浮动元素是在文字区域与块级元素之间的。

那浮动元素里面的文字与外面的文字是怎么样的呢?这边我直接在浮动里面加了 float文字,效果如下:

clipboard.png

你会发现 浮动里面的文字是盖不住浮动外面文字的。

绝对定位元素

在上面的基础上我们增加一个 relative 元素,如下:

  // htmk
  <div class="parent">
      你好
    <div class="float">floatt</div>
    <div class="child"></div>
    <div class="relative"></div>
  </div>

 // css
.relative{
  width: 100px;
  height: 100px;
  background: pink;
  margin-top: -15px;
}

效果如下:

clipboard.png

这时我们给类relative 加上一个:

position:relative;

效果如下:

clipboard.png

你会发现 relative 元素盖住了浮动元素,这说明 给元素加一个 relative 定位会增加对应的一个层级。检查 relative 元素,会看到:

clipboard.png

加了 position:relative定位会多了一个 z-index:auto 的东西,实际上你定位,都是按z-index来计算的。

这里我们给没有定位的 child元素加上一个z-index:

  <div class="parent">
      你好
    <div class="float">floatt</div>
    <div class="child" style="z-index:99999"></div>
    <div class="relative"></div>
  </div>

效果如下:

clipboard.png

你会发现 child 元素并没有盖住 relative 元素!

这边直接 给了结论了:z-index 只有在 position:relative|absolute 才有效果,如果都是relative,z-index一样,那么后面会盖前面,z-index值大的会盖住小的。

我们接着在原有上加一个relative2,样式如下:

.relative2{
  width: 100px; 
  height: 150px;
  background: gold;
  margin-top: -15px;
  position: relative;
}

效果如下:

clipboard.png

此时给 relative2 加上一个 z-index:-1,在看

clipboard.png

又得出一个结论:z-index为负值时,是位于 background下面的

这时,我们给.parent元素添加以下两个样式:

  position: relative;
  z-index: 0;    

这时的效果如下:

clipboard.png

这时奇怪的事情就出现了,z-index: -1 的跑到上面来了。

MDN上有对什么堆叠给出了一些内容,如下 :

clipboard.png

其实我们给.parent元素设置z-index:0 ,根据MDN说的,我们其实已经 创造一个层叠上下文 。

那什么是堆叠上下文?下面是张鑫旭一段原文:

clipboard.png

其实这跟美国一个大法官说的一句话很像:我不知道什么色情,但当我看到它是我就知道什么是色情。

CSS堆叠上下文也是类似的道理,你很难说出什么是CSS堆叠上下文,但只要它满足MDN列出的几种情况,它就是CSS堆叠上下文。

CSS堆叠层叠顺序

CSS堆叠上下文是有一个垂直屏幕上有一个上关系的,它们的关系如下:

clipboard.png

所以这就解释为什么z-index为负值的时候,它会在 background上面,因为我们 z-index:0 时就创建一个CSS堆叠上下文。

CSS堆叠上下文作用

下面给一个基本的内容:

  // html
  <div class="parent">
    <div class="a relative">a
      <div class="a1">a1</div>
    </div>
    <div class="b relative">b
      <div class="b1">b1</div>
    </div>
  </div>
  // css
 .parent{
  width: 200px;
  height: 200px;
  border:10px solid rgb(255, 0, 0);
  padding:15px;
  margin:12px;
  background-color: green;
}
.relative{
  width:100px;
  height:100px;
  background: orange;
  position: relative;
  border:1px solid red;
}
.a1{
  position: relative;
  background:green;
}
.b1{
  position: relative;
  background:red;
}

效果如下:

clipboard.png

接着我们在b1在添加以下样式:

   margin-top: -90px;

clipboard.png

b1会盖住a1,这个我们应该知道是什么原因了吧?因为a1 b1都是块级元素,后面会盖住前面的,没毛病!

那么 a1 和 b1 的CSS堆叠上下文是谁?

我们可以MDN给出的第一句:

clipboard.png

根元素,所以a1 和 b1的CSS堆叠上下文就是Html

接着给a1以下样式:

   z-index: 2;

接着给b1以下样式:

z-index: 0;    

效果如下:

clipboard.png

a1跑到b1上面了,这个很好理解,因为 a1 的z-index:2 比 b1的z-index:0 在,所以a1在上面。

现在有一个问题,a1是永远盖住b1吗?

这边你可能会说,a1 的z-index:2比 b1的 z-index:0 永远都大,当然会盖住b1呀!**是这样吗?**我们试着改变一下CSS堆叠上下文。

我们分别给a 和 b各做一个CSS堆叠上下文: 如下:

.a{
  position: relative;
  z-index: 1;
}
.b{
  position: relative;
  z-index: 1;
}

效果如下:

clipboard.png

先分析a 和 b它们是谁覆盖谁,因为 两个定位和z-index都一样所以 b 会覆盖 a。还有一个现象有没有发现, b1 盖住了 a1? 明明 a1 的 z-index 大于 b1,这是为什么?为什么小的会盖住大的?为什么?

因为 b 比 a 高一点,所以 b 里面的内容都会比 a 高一点。这就是 CSS堆叠上下文一个特性。

比如说阿里巴巴有一个奇怪的部门叫做政委,是由马云等一些创始人组成的。在这个部门里面,你是不是都比其它部门要高级点。

所以 b1 虽然在 b 里面等级为0,在 b 是高级的一个部门,就是可以压过你 a 这个部门里面的 2 级的人。

今天说这些了,如果还太明白可以看看以下的内容 :

张鑫旭的深入理解CSS中的层叠上下文和层叠顺序 MDN 文档

更多内容可以关注下面这个很少人喜欢的一个笨笨的人

一个笨笨的码农,我的世界只能终身学习

图片描述

原文链接:https://segmentfault.com/a/1190000016656270

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42458.html

文章标题:图解一下啥是CSS堆叠上下文,啥是CSS堆叠层叠顺序,让你对css的疑惑少一点?

相关文章
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回&quot;undefined&quot;:一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
回到顶部