外还包括,  该属性不仅可以作用于HTML

二、isolation:isolate作用的原理

isolation:isolate之所以可以阻断混合模式的进行,本质上是因为isolation:isolate创建一个新的层叠上下文(stacking context)。

没错,之所以起作用,就是单纯地因为创建了新的层叠上下文。本身并没有做什么特殊的事情。或者我可以这么大胆的说:“isolation:isolate除了创建层叠上下文,其他没有任何鸟用!”

可能有人会疑问,如果按照你的说法,岂不是任何可以创建层叠上下文的属性都可以阻断mix-blend-mode的生效?

没错,就是这样子的!

只要元素可以创建层叠上下文,就可以阻断mix-blend-mode!

于是,不仅仅是isolation:isolate,下面这些也是可以的:

  1. z-index值不为autoposition:relative/position:absolute定位元素。
  2. position:fixed,仅限Chrome浏览器,其他浏览器遵循上一条,需要z-index为数值。
  3. z-index值不为autoflex项(父元素display:flex|inline-flex).
  4. 元素的opacity值不是1.
  5. 元素的transform值不是none.
  6. 元素mix-blend-mode值不是normal.
  7. 元素的filter值不是none.
  8. will-change指定的属性值为上面任意一个。
  9. 元素的-webkit-overflow-scrolling设为touch.

眼见为实,您可以狠狠地点击这里:层叠上下文与混合模式阻隔测试demo

选择任意一款层叠上下文,大家都可以感受到对mix-blend-mode的阻隔,例如:
图片 1

六、层叠上下文的创建

卖了这么多文字,到底层叠上下文是个什么鬼,倒是拿出来瞅瞅啊!

哈哈。如同块状格式化上下文,层叠上下文也基本上是有一些特定的CSS属性创建的。我将其总结为3个流派,也就是做官的3种途径:

  1. 皇亲国戚派:页面根元素天生具有层叠上下文,称之为“根层叠上下文”。
  2. 科考入选派:z-index值为数值的定位元素的传统层叠上下文。
  3. 其他当官途径:其他CSS3属性。

//zxx: 下面很多例子是实时CSS效果,建议您去原地址浏览,以便预览更准确的效果。

①. 根层叠上下文

指的是页面根元素,也就是滚动条的默认的始作俑者<html>`元素。这就是为什么,绝对定位元素在left/top`等值定位的时候,如果没有其他定位元素限制,会相对浏览器窗口定位的原因。

②. 定位元素与传统层叠上下文

对于包含有position:relative/position:absolute的定位元素,以及FireFox/IE浏览器(不包括Chrome等webkit内核浏览器)(目前,也就是2016年初是这样)下含有position:fixed声明的定位元素,当其z-index值不是auto的时候,会创建层叠上下文。

知道了这一点,有些现象就好理解了。

如下HTML代码:

<div style="position:relative; z-index:auto;"> <img src="mm1.jpg" style="position:absolute; z-index:2;"> <-- 横妹子 --> </div> <div style="position:relative; z-index:auto;"> <img src="mm2.jpg" style="position:relative; z-index:1;"> <-- 竖妹子 --> </div>

1
2
3
4
5
6
<div style="position:relative; z-index:auto;">
    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 -->
</div>
<div style="position:relative; z-index:auto;">
    <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 -->
</div>

图片 2

大家会发现,竖着的妹子(mm2)被横着的妹子(mm1)给覆盖了。

下面,我们对父级简单调整下,把z-index:auto改成层叠水平一致的z-index:0, 代码如下:

<div style="position:relative; z-index:0;"> <img src="mm1.jpg" style="position:absolute; z-index:2;"> <-- 横妹子 --> </div> <div style="position:relative; z-index:0;"> <img src="mm2.jpg" style="position:relative; z-index:1;"> <-- 竖妹子 --> </div>

1
2
3
4
5
6
<div style="position:relative; z-index:0;">
    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 -->
</div>
<div style="position:relative; z-index:0;">
    <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 -->
</div>

图片 3

大家会发现,尼玛反过来了,竖着的妹子(mm2)这回趴在了横着的妹子(mm1)身上。

图片 4

为什么小小的改变会有想法的结果呢?
图片 5

差别就在于,z-index:0所在的<div>元素是层叠上下文元素,而z-index:auto所在的<div>元素是一个普通的元素,于是,里面的两个<img>妹子的层叠比较就不受父级的影响,两者直接套用层叠黄金准则,这里,两者有着明显不一的z-index值,因此,遵循“谁大谁上”的准则,于是,z-index2的那个横妹子,就趴在了z-index1的竖妹子身上。

z-index一旦变成数值,哪怕是0,都会创建一个层叠上下文。此时,层叠规则就发生了变化。层叠上下文的特性里面最后一条——自成体系。两个<img>妹子的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。这里,由于两者都是z-index:0,层叠顺序这一块两者一样大,此时,遵循层叠黄金准则的另外一个准则“后来居上”,根据在DOM流中的位置决定谁在上面,于是,位于后面的竖着的妹子就自然而然趴在了横着的妹子身上。对,没错,<img>元素上的z-index打酱油了!

有时候,我们在网页重构的时候,会发现,z-index嵌套错乱,看看是不是受父级的层叠上下文元素干扰了。然后,可能没多大意义了,但我还是提一下,算是祭奠下,IE6/IE7浏览器有个bug,就是z-index:auto的定位元素也会创建层叠上下文。这就是为什么在过去,IE6/IE7的z-index会搞死人的原因。

然后,我再提一下position:fixed, 在过去,position:fixedrelative/absolute在层叠上下文这一块是一路货色,都是需要z-index为数值才行。但是,不知道什么时候起,Chrome等webkit内核浏览器,position:fixed元素天然层叠上下文元素,无需z-index为数值。根据我的测试,目前,IE以及FireFox仍是老套路。

③. CSS3与新时代的层叠上下文
CSS3的出现除了带来了新属性,同时还对过去的很多规则发出了挑战。例如,CSS3 transform对overflow隐藏对position:fixed定位的影响等。而这里,层叠上下文这一块的影响要更加广泛与显著。

如下:

  1. z-index值不为autoflex项(父元素display:flex|inline-flex).
  2. 元素的opacity值不是1.
  3. 元素的transform值不是none.
  4. 元素mix-blend-mode值不是normal.
  5. 元素的filter值不是none.
  6. 元素的isolation值是isolate.
  7. will-change指定的属性值为上面任意一个。
  8. 元素的-webkit-overflow-scrolling设为touch.

基本上每一项都有很多槽点。

1. display:flex|inline-flex与层叠上下文
注意,这里的规则有些负责。要满足两个条件才能形成层叠上下文:条件1是父级需要是display:flex或者display:inline-flex水平,条件2是子元素的z-index不是auto,必须是数值。此时,这个子元素为层叠上下文元素,没错,注意了,是子元素,不是flex父级元素。

眼见为实,给大家上例子吧。

如下HTML和CSS代码:

<div class="box"> <div> <img src="mm1.jpg"> </div> </div>

1
2
3
4
5
<div class="box">
    <div>
     <img src="mm1.jpg">
    </div>
</div>

.box { } .box > div { background-color: blue; z-index: 1; } /* 此时该div是普通元素,z-index无效 */ .box > div > img { position: relative; z-index: -1; right: -150px; /* 注意这里是负值z-index */ }

1
2
3
4
5
.box {  }
.box > div { background-color: blue; z-index: 1; }    /* 此时该div是普通元素,z-index无效 */
.box > div > img {
  position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */
}

结果如下:

图片 6

会发现,妹子跑到蓝色背景的下面了。为什么呢?层叠顺序图可以找到答案,如下:
图片 7

从上图可以看出负值z-index的层叠顺序在block水平元素的下面,而蓝色背景div元素是个普通元素,因此,妹子直接穿越过去,在蓝色背景后面的显示了。

现在,我们CSS微调下,增加display:flex, 如下:

.box { display: flex; } .box > div { background-color: blue; z-index: 1; } /* 此时该div是层叠上下文元素,同时z-index生效 */ .box > div > img { position: relative; z-index: -1; right: -150px; /* 注意这里是负值z-index */ }

1
2
3
4
5
.box { display: flex; }
.box > div { background-color: blue; z-index: 1; }    /* 此时该div是层叠上下文元素,同时z-index生效 */
.box > div > img {
  position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */
}

结果:

图片 8

会发现,妹子在蓝色背景上面显示了,为什么呢?层叠顺序图可以找到答案,如下:
图片 9
从上图可以看出负值z-index的层叠顺序在当前第一个父层叠上下文元素的上面,而此时,那个z-index值为1的蓝色背景`` 

的父元素的display值是flex,一下子升官发财变成层叠上下文元素了,于是,图片在蓝色背景上面显示了。这个现象也证实了层叠上下文元素是flex子元素,而不是flex容器元素。

另外,另外,这个例子也颠覆了我们传统的对z-index的理解。在CSS2.1时代,z-index属性必须和定位元素一起使用才有作用,但是,在CSS3的世界里,非定位元素也能和z-index愉快地搞基。

2. opacity与层叠上下文

我们直接看代码,原理和上面例子一样,就不解释了。

如下HTML和CSS代码:

<div class="box"> <img src="mm1.jpg"> </div>

1
2
3
<div class="box">
    <img src="mm1.jpg">
</div>

.box { background-color: blue; } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 10

然后价格透明度,例如50%透明:

.box { background-color: blue; opacity: 0.5; } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; opacity: 0.5;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 11

原因就是半透明元素具有层叠上下文,妹子图片的z-index:-1无法穿透,于是,在蓝色背景上面乖乖显示了。

3. transform与层叠上下文

应用了transform变换的元素同样具有菜单上下文。

我们直接看应用后的结果,如下CSS代码:

.box { background-color: blue; transform: rotate(15deg); } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; transform: rotate(15deg);  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 12

4. mix-blend-mode与层叠上下文
mix-blend-mode类似于PS中的混合模式,之前专门有文章介绍-“CSS3混合模式mix-blend-mode简介”。

元素和白色背景混合。无论哪种模式,要么全白,要么没有任何变化。为了让大家有直观感受,因此,下面例子我特意加了个原创平铺背景:

.box { background-color: blue; mix-blend-mode: darken; } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; mix-blend-mode: darken;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 13

需要注意的是,目前,IE浏览器(包括IE14)还不支持mix-blend-mode,因此,要想看到妹子在背景色之上,请使用Chrome或FireFox。

同样的,因为蓝色背景元素升级成了层叠上下文,因此,z-index:-1无法穿透,在蓝色背景上显示了。

5. filter与层叠上下文

此处说的filter是CSS3中规范的滤镜,不是旧IE时代私有的那些,虽然目的类似。同样的,我之前有提过,例如图片的灰度或者图片的毛玻璃效果等。

我们使用常见的模糊效果示意下:

.box { background-color: blue; filter: blur(5px); } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; filter: blur(5px);  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 14

好吧,果然被你猜对了,妹子蓝色床上躺着,只是你眼镜摘了,看得有些不够真切罢了。

6. isolation:isolate与层叠上下文
isolation:isolate这个声明是mix-blend-mode应运而生的。默认情况下,mix-blend-mode会混合z轴所有层叠在下面的元素,要是我们不希望某个层叠的元素参与混合怎么办呢?就是使用isolation:isolate。由于一言难尽,我特意为此写了篇文章:“理解CSS3 isolation: isolate的表现和作用”,解释了其阻隔混合模式的原理,建议大家看下。

要演示这个效果,我需要重新设计下,如下HTML结构:

<img src="img/mm2.jpg" class="mode"> <div class="box"> <img src="mm1.jpg"> </div>

1
2
3
4
<img src="img/mm2.jpg" class="mode">
<div class="box">
    <img src="mm1.jpg">
</div>

CSS主要代码如下:

.mode { /* 竖妹子绝对定位,同时混合模式 */ position: absolute; mix-blend-mode: darken; } .box { background: blue; } .box > img { position: relative; z-index: -1; }

1
2
3
4
5
6
7
8
9
10
.mode {
  /* 竖妹子绝对定位,同时混合模式 */
  position: absolute; mix-blend-mode: darken;
}    
.box {
  background: blue;        
}
.box > img {
  position: relative; z-index: -1;
}

结构如下:

图片 15

会发现,横妹子被混合模式了。此时,我们给妹子所在容器增加isolation:isolate,如下CSS所示:

.mode { /* 竖妹子绝对定位,同时混合模式 */ position: absolute; mix-blend-mode: darken; } .box { background: blue; isolation:isolate; } .box > img { position: relative; z-index: -1; }

1
2
3
4
5
6
7
8
9
10
.mode {
  /* 竖妹子绝对定位,同时混合模式 */
  position: absolute; mix-blend-mode: darken;
}    
.box {
  background: blue; isolation:isolate;        
}
.box > img {
  position: relative; z-index: -1;
}

结果为:

图片 16

会发现横着的妹子跑到蓝色背景上面了。这表明确实创建了层叠上下文。
7. will-change与层叠上下文

关于will-change,如果有同学还不了解,可以参见我之前写的文章:“使用CSS3 will-change提高页面滚动、动画等渲染性能”。

都是类似的演示代码:

.box { background-color: blue; will-change: transform; } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; will-change: transform;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 17

果然不出所料,妹子上了蓝色的背景。

mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离,mixblendmode

css3 mix-blend-mode 混合模式
  该属性不仅可以作用于HTML,还可以作用于SVG
  兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari 7~9.1
  支持的值很多:
  mix-blend-mode:normal;    //正常
  mix-blend-mode:multiply;   //正片叠加
  mix-blend-mode:screen;   //滤色
  mix-blend-mode:overlay;   //叠加
  mix-blend-mode:darken;   //变暗
  mix-blend-mode:lighten;   //变亮
  mix-blend-mode:color-dodge;   //颜色减淡
  mix-blend-mode:color-burn;   //颜色加深
  mix-blend-mode:hard-light;   //强光
  mix-blend-mode:soft-light;   //柔光
  mix-blend-mode:difference;   //差值
  mix-blend-mode:exclusion;   //排除
  mix-blend-mode:hue;     //色相
  mix-blend-mode:color;     //颜色
  mix-blend-mode:luminosity; //亮度
  mix-blend-mode:initial;   //初始
  mix-blend-mode:inherit;   //继承
  mix-blend-mode:unset;   //复原

css3 background-blend-mode 背景混合模式
  可以是背景图片见的混合模式,也可以是背景图片和背景色的混合。
  兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari 7~9.1
  CSS3 backgrounds多背景IE9+浏览器就开始支持了,因此,你想混合多图,就是要逗号,一个一个写在background属性中就可以了,
  .box {
    background: url(mm1.jpg) no-repeat center, url(mm2.jpg) no-repeat center;
  }

css3 isolation:isolate 隔离
  值除了万年不变的inherit外还包括auto和isolate
  isolation:isolate 的原理:本质上是因为 isolation:isolate 创建一个新的层叠上下文。
  只要有元素可以创建层叠上下文,就可以阻断mix-blend-mode
    1.z-index值不为auto的position:relative/position:absolute定位元素。
    2.position:fixed,仅限Chrome浏览器,其他浏览器遵循上一条,需要z-index为数值。
    3.z-index值不为auto的flex项(父元素display:flex|inline-flex)。
    4.元素的opacity值不是1。
    5.元素的transform值不是none。
    6.元素mix-blend-mode值不是normal。
    7.元素的filter值不是none。
    8.will-change指定的属性值为上面任意一个。
    9.元素的-webkit-overflow-scrolling设为touch。

混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离,mixblendmode css3 mix-blend-mode 混合模式 该属性不仅可以作用于HTML,还...

探究:绝对定位没有设置 top, right, bottom, left 的世界是怎样的?

2015/08/19 · CSS · 绝对定位

原文出处: bolo的前端blog   

一个元素如果设置了’position: absolute;’, 但没有设置top, right, bottom, left, 此元素的位置在哪?

在涉及到绝对定位元素的位置问题时, 一个重要的概念是containing block, 想要了解元素的位置, 还得找到此元素的containing block才行. 如下是我进行的一系列测试, 以及对测试结果的试探性解释.

文中的英文术语都不翻译, 方便直接查W3C或者其他技术文档.
请持有怀疑精神阅读此文, 欢迎讨论.

四、结束语

由此看来,CSS3不仅仅是增加了一些表现层的东西,类似层叠上下文这样的概念变得更加厚重了,其背后的很多交织在一起的关系也比想象的复杂,但是又是互相验证的体系。

CSS的学习还是相当任重道远的。

图片 18

1 赞 1 收藏 评论

图片 19

四、务必牢记的层叠准则

下面这两个是层叠领域的黄金准则。当元素发生层叠的时候,其覆盖关系遵循下面2个准则:

  1. 谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
  2. 后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

在CSS和HTML领域,只要元素发生了重叠,都离不开上面这两个黄金准则。因为后面会有多个实例说明,这里就到此为止。

小结

当绝对定位且不设置方向值的元素在inline box里时:

  1. 未设置的方向(top, right, bottom, left)的值是auto.
  2. 此元素containing block的左边缘应该是该元素前一个元素(空白符除外)的margin右边缘.
  3. 此元素containing block的上边缘应该是该元素所在的line box的content box的上边缘
  4. 如果left的值为auto, 则该元素会定位到其containing block的左边缘. 如果top的值为auto, 则该元素会定位到其containing block的上边缘.

当绝对定位且不设置方向值的元素在block box里时:

  1. 未设置的方向(top, right, bottom, left)的值是auto.
  2. 此元素的containing block的左边缘和上边缘应该是其父元素创建的content box的左边缘和上边缘.
  3. 如果left的值为auto, 则该元素会定位到其containing block的左边缘. 如果top的值为auto, 则该元素会定位到其containing block的上边缘.

本文只探讨了元素分别在line box和block box里的containing block的左边缘和上边缘(文本的’direction‘为默认的’ltr’, 即从左到右), 还有更多有待探讨.

本文所探讨的问题我没有找到直接相关的W3C规范, 如果有请一定要@bolo :)

1 赞 2 收藏 评论

图片 20

一、关于isolation

isolation是一个CSS3属性,顾名思意是“隔离”,支持的值除了万年不变的inherit外还包括autoisolate.

继承没什么好说的。auto实际上就是不干事的意思,是元素的默认值。所以,我们只需要关心isolation: isolate这个声明就好了。

isolation: isolate正如其语义,就是隔离的意思,那隔离什么呢?本义是用来隔离mix-blend-mode元素的混合。

关于mix-blend-mode混合模式可以参考我之前的文章:“CSS3混合模式mix-blend-mode简介”。

当元素应用了混合模式的时候,默认情况下,其会混合z轴上所有层叠顺序比其低的层叠元素。

但是,有时候,我们希望混合模式只到某一个元素,或者只是某一组元素怎么办呢?isolation: isolate就是为了解决这个问题产生的。

您可以狠狠地点击这里:isolation: isolate作用演示demo

如下CSS和HTML结构:

.box { background-color: #0074D9; } .inner { width: 256px; height: 256px; background: url(mm1.jpg) no-repeat; } .mode { position: relative; right: -100px; mix-blend-mode: darken; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    background-color: #0074D9;
}
.inner {
    width: 256px;
    height: 256px;
    background: url(mm1.jpg) no-repeat;    
}
.mode {
    position: relative;
    right: -100px;
    mix-blend-mode: darken;
}

<div class="box"> ><div class="inner"> ><img src="mm2.jpg" class="mode"> ></div> ></div>

1
2
3
4
5
<div class="box">
    ><div class="inner">
        ><img src="mm2.jpg" class="mode">
    ></div>
></div>

此时,mm2这个竖妹子不仅和mm1横妹子发生了混合,还和蓝色的背景色发生了混合。

图片 21

然后,我们想要实现的效果是,仅仅两张图片发生混合,这时候应该怎么办?

此时就可以使用isolation:isolate进行阻断,形成一个混合组。组以外的其他元素不会发生层叠。

所以,例如,点击demo页面的按钮,给.inner这层div元素增加isolation:isolate, 大家会发现,mm2这个竖妹子没有和蓝色背景色发生混合,如下截图:
图片 22

深入理解CSS中的层叠上下文和层叠顺序

2016/01/10 · CSS · 层叠上下文

原文出处: 张鑫旭   

零、世间的道理都是想通的

在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈。比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上。再比如说话语权,老婆的话永远是对的,领导的话永远是对的。

在CSS届,也是如此。只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等。但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了。例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的。那对于CSS世界中的元素而言,所谓的“冲突”指什么呢,其中,很重要的一个层面就是“层叠显示冲突”。

默认情况下,网页内容是没有偏移角的垂直视觉呈现,当内容发生层叠的时候,一定会有一个前后的层叠顺序产生,有点类似于真实世界中论资排辈的感觉。

而要理解网页中元素是如何“论资排辈”的,就需要深入理解CSS中的层叠上下文和层叠顺序。

我们大家可能都熟悉CSS中的z-index属性,需要跟大家讲的是,z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。

在block box里的情况

 点击预览

XHTML

<section class="demo demorel"> <div class="floatele"> <div class="inbox2"></div> </div> </section>

1
2
3
4
5
<section class="demo demorel">
  <div class="floatele">
    <div class="inbox2"></div>
  </div>
</section>

CSS主要有:

CSS

.inbox2 { background: #6c4ecd; width: 50px; height: 50px; position: absolute; } .floatele { float: right; width: 300px; height:50px; background: tomato; padding: 10px; } .demorel { position: relative; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.inbox2 {
    background: #6c4ecd;
    width: 50px;
    height: 50px;
    position: absolute;
}
.floatele {
    float: right;
    width: 300px;
    height:50px;
    background: tomato;
    padding: 10px;
}
.demorel {
    position: relative;
}

div.inbox2的containing block的左边缘和上边缘都是其直系父元素content box的左边缘和上边缘 (content box的边缘又称content edge).

但值得注意的是, 此例与常规绝对定位情况下的区别:
点击预览

CSS有改变, 包含在HTML内:

XHTML

<section class="demo demorel"> <div style="position: relative;" class="floatele"> <div style="left: 0; top: 0;" class="inbox2"></div> </div> </section>

1
2
3
4
5
<section class="demo demorel">
  <div style="position: relative;" class="floatele">
    <div style="left: 0; top: 0;" class="inbox2"></div>
  </div>
</section>

这是一个常规的绝对定位例子, 因为设置了top和left的值. 值得注意的一点是, 此时div.inbox2的containing block的左边缘和上边缘是其直系父元素的padding edge.

本文由必威发布于必威-前端,转载请注明出处:外还包括,  该属性不仅可以作用于HTML

相关阅读