您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:index鲜为人知的事情,index的一些事

新葡亰496net:index鲜为人知的事情,index的一些事

发布时间:2019-09-11 10:51编辑:新葡亰官网浏览(177)

    没人告诉你关于z-index的一部分事

    2015/07/23 · CSS · z-index

    原作出处: Philip Walton   译文出处:HelKyle(@Helkyle)   

    关于z-index的标题是累累技士都不明白它是什么样起效果的。提起来轻巧,可是多数人并未花时间去看标准,那往往会照成严重的结局。

    你不信?那就一路来看看下边包车型客车难题。

    z-index堆积规则,z-index堆成堆

    关于z-index比相当少有人去深刻的摸底它,因为它看起来轻易也不复杂,不便是哪个人的数字大,什么人就展现在日前吧?可是明天所摘录的那篇博文,让我非常吃惊了。笔者承认作者历来没有花时间去看现实的z-index相关文档,所以小编为此忽视了关于z-index的有的器重的音讯。

    <style type="text/css"></style>
    <link href="public.css" rel="stylesheet" type="text/css"/>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <head>
    <title>利用定位来呈现垂直局中的图片</title>
    <style type="text/css">
    .miao {
      width:500px;
      height:220px;
      line-height:220px;
      border: 1px solid;
      text-align: center;
    }
    .miao img {
      vertical-align: middle;
    }
    </style>
    <!--[if IE 6]>
    <style type="text/css">
      .miao span {
        border: 1px solid red;
        height: 100%; /* 要确定保证和父成分中度同样才行 */
        writing-mode: tb-rl;
        vertical-align: middle;
      }
    </style>
    <![endif]-->
    </head>
    <body>
    <h1>固定高宽的容器中,图片垂直局中。</h1>
    <p>使用的断然定位和绝对固定的办法</p>
    <div class="miao">
     <span><img src="" alt="Logo" /></span>你精晓的太多了您明白的太多了你知道的太多了
    </div>
    <hr />
    <div class="miao">
     <span><img src="" alt="Logo" /></span>你理解的太多了您知道的太多了您知道的太多了
    </div>
    <hr />
    <div class="miao">
     <span><img src="" alt="谷歌(Google)" /></span>你掌握的太多了
    </div>
    </body>
    </html>

    问题

    在底下的HTML大家写了3<div>要素,然后每一个<div>要素里面都有叁个元素,每个要素都有个背景观,并且使用absolute永久,为了能更清楚地察看z-index的机能,大家写了某个其他的体裁。第一个`元素的z-index值为1`,其余八个未有设置。

    代码如下:

    XHTML

    <div> <span class="red">Red</span> </div> <div> <span class="green">Green</span> </div> <div> <span class="blue">Blue</span> </div> .red, .green, .blue { position: absolute; } .red { background: red; z-index: 1; } .green { background: green; } .blue { background: blue; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <div>
      <span class="red">Red</span>
    </div>
    <div>
      <span class="green">Green</span>
    </div>
    <div>
      <span class="blue">Blue</span>
    </div>
     
    .red, .green, .blue {
      position: absolute;
    }
    .red {
      background: red;
      z-index: 1;
    }
    .green {
      background: green;
    }
    .blue {
      background: blue;
    }

    See the Pen Stacking Order (problem) by Philip Walton (@philipwalton) on CodePen.

    接下来挑衅来了: 尝试把青古铜色的``成分放到任何多少个要素后面,可是必需遵守上边包车型大巴条条框框:

    • 不能够改改HTML的源委
    • 新葡亰496net:index鲜为人知的事情,index的一些事。不能够扩大或退换任何因素的z-index属性
    • 无法扩充或改换任何因素的position属性

    想挑衅一些来讲,就点击下边Codepen的Edit按键去尝尝一下啊。假设您不可能完结,这就随即看下来。

    一、z-index

    z-index用来决定成分重叠时堆成堆顺序。

    适用于:已经定位的要素(即position:relative/absolute/fixed)。

    诚如明白正是数值越高越靠上,好像很轻便,可是当z-index应用于复杂的HTML成分等级次序结构,其表现恐怕很难精通乃至不足预测。因为z-index的聚成堆法则很复杂,下边一一道来。

    第一解释二个名词:

    stacking context:翻译就是“堆放上下文”。每种成分仅属于一个堆积上下文,成分的z-index描述成分在相同聚积上下文中“z轴”的展现顺序。

    z-index取值:

    默认值auto:

    当页面新生成贰个box时,它暗许的z-index值为auto,意味着该box不会友善发生多个新的local stacking context,而是处于和父box一样的聚积上下文中。

    正/负整数

    本条大背头就是当下box的z-index值。z-index值为0也会变动三个local stacking context,那样该box父box的z-index就不会和其子box做相比,也正是隔断了父box的z-index和子box的z-index。

    接下去从最简易的不利用z-index的景色开头将,按部就班。

    不依赖作者吗?可以吗,看看你是还是不是缓慢解决上面那些标题:

    先行级 <span style="color:red;"></span> 越临近成分的css属性优先级越高

     

    设计方案

    See the Pen Stacking Order (problem) by Philip Walton (@philipwalton) on CodePen.

    解决方案很简短,你只需求给革命的`标签增加一个opacity小于1`,像上边那样:

    XHTML

    div:first-child { opacity: .99; }

    1
    2
    3
    div:first-child {
      opacity: .99;
    }

    要是你感到难以置信了,不相信光滑度会潜移暗化叠合顺序,那么恭喜你,即将学习新的才能,一开首看到自个儿也不信。

    接下去让大家来寻觅一番。

    二、不应用 z-index时聚成堆顺序

    不使用z-index的情况,也是暗中认可的境况,即具备因素都毫不z-index时,积聚顺序如下(从下到上)

    • 根元素(即HTML元素)的background和borders
    • 平常流中国和亚洲恒久后代成分(那一个因素顺序根据HTML文书档案出现顺序)
    • 已稳固后代成分(这几个要素顺序依照HTML文档出现顺序)

    解释一下后两条规则:

    • 正常流中国和澳洲positoned element元素,总是先于positioned element成分渲染,所以突显就是在positioned element下方,跟它在HTML中出现的逐一非亲非故。
    • 尚无点名z-index值的positioned element,他们的聚成堆顺序取决于在HTML文书档案中的顺序,越靠后出现的成分,地方越高,和position属性非亲非故。

    例子:

    新葡亰496net 1<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stacking without z-index</title> <style type="text/css"> div { font: 12px Arial; text-align: center; } .bold { font-weight: bold; } .opacity{opacity: 0.7;} #normdiv { height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; } #reldiv1 { height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #reldiv2 { height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #absdiv1 { position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; } #absdiv2 { position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; } </style> </head> <body> <br /><br /> <div id="absdiv1" class="opacity"> <br /><span class="bold">DIV #1</span> <br />position: absolute; </div> <div id="reldiv1" class="opacity"> <br /><span class="bold">DIV #2</span> <br />position: relative; </div> <div id="reldiv2" class="opacity"> <br /><span class="bold">DIV #3</span> <br />position: relative; </div> <div id="absdiv2" class="opacity"> <br /><span class="bold">DIV #4</span> <br />position: absolute; </div> <div id="normdiv"> <br /><span class="bold">DIV #5</span> <br />no positioning </div> </body> </html> View Code

    有图有精神:

    新葡亰496net 2

     分析:

    #5从未有过一定,处张永琛常流,所以依据以上准绳,先于#1,#2,#3,#4这一个已定位成分渲染,在最下方。

    #1,#2,#3,#4都以已定位成分,且未设置z-index,所以遵照其在文档中出现的次第依次被渲染,能够去掉apacity查看清晰效果。

    问题:

    在 接下来的HTML里 有多少个<div>成分,并且每一个<div>里满含叁个<span>成分。每一个<span>被分级给定五个背景颜色:红、绿、蓝。每种<span>被放置到文书档案的左上角左近,部分重叠着另外的<span>元素,那样您就足以看来什么样是被聚积在日前。第叁个<span>有二个z-index的值为1,而别的五个从未任 何z-index值。

    以下便是其一HTML和它的为主CSS。

    HTML代码

    <div>
      Red
    </div>
    <div>
      Green
    </div>
    <div>
      Blue
    </div>
    

    CSS代码:

    .red, .green, .blue {
      position: absolute;
      /*其它样式省略*/
    }
    .red {
      background: red;
      z-index: 1;
    }
    .green {
      background: green;
    }
    .blue {
      background: blue;
    }
    

    看起来的作用图应该是那样子的:

    新葡亰496net 3

     

     

    选择器优先级
    行内style >ID选择器 > class类接纳器>html标签选拔器
    .new ul li a.blue{color:blue;}> a:hover{color:red;} > .white{color:white;}

     

    堆集顺序

    z-index看上去很简短,z-index值大的因素在z-index值小的成分后面,对吗?但骨子里那只是z-index的一局地用法。相当多程序员都是为很简短,未有花太多日子去认真读书法规。

    HTML中的每一成分都以在任何因素的眼下也许前面。那是明显的积聚顺序(Stacking Order),那条法则在w3c标准内部说的很领悟,但本人这段日子提到过了,半数以上工程师并不真的理解。

    假定未有关系z-indexposition属性的话,那准则相当的粗略,积聚顺序正是因素在HTML中冒出的相继。(当然如若你对行内成分采用负margin的话,大概情状会复杂一些。)

    加上position属性的话,正是兼备定位了得成分在平昔不被定位的元素前面。(一个因素被固定的情致这里指的是它有三个position天性,可是或不是static,而是relative,absolute等)

    再加上z-index品质,事情就变得有些奇异。首先z-index值越大,越靠前。但是z-index特性只坚守在被固化了的要素上。所以一旦你在二个没被定位的成分上行使z-index的话,是不会有效果的。还大概有正是z-index会创建一个堆积的上下文(Stacking Contexts),大家能够精通为贰个层。

    三、浮动聚成堆顺序

    浮动成分z-index地点介于非定位成分和平昔成分之间。(从下到上)

    • 根成分(即HTML成分)的背景和border
    • 平常流中国和澳洲永久后代成分(这几个因素顺序依据HTML文书档案现身顺序)
    • 变迁成分(浮动成分之间是不会出现z-index重叠的)
    • 符合规律流中inline后代成分
    • 已牢固后代成分(那么些因素顺序遵照HTML文书档案现身顺序)

     non-positioned成分的背景和边界未有被转移成分影响,不过元素中的内容受影响(浮动布局性格)

    举例:

    新葡亰496net 4<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stacking and float</title> <style type="text/css"> div { font: 12px Arial; text-align: center; } .bold { font-weight: bold; } .opacity{ opacity: 0.7;} #absdiv1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 140px; border: 1px dashed #990000; background-color: #ffdddd; } #normdiv { /* opacity: 0.7; */ height: 100px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 10px 0px 10px; text-align: left; } #flodiv1 { margin: 0px 10px 0px 20px; float: left; width: 150px; height: 200px; border: 1px dashed #009900; background-color: #ccffcc; } #flodiv2 { margin: 0px 20px 0px 10px; float: right; width: 150px; height: 200px; border: 1px dashed #009900; background-color: #ccffcc; } #absdiv2 { position: absolute; width: 150px; height: 100px; top: 130px; left: 100px; border: 1px dashed #990000; background-color: #ffdddd; } </style> </head> <body> <br /><br /> <div id="absdiv1" class="opacity"> <br /><span class="bold">DIV #1</span> <br />position: absolute; </div> <div id="flodiv1" class="opacity"> <br /><span class="bold">DIV #2</span> <br />float: left; </div> <div id="flodiv2" class="opacity"> <br /><span class="bold">DIV #3</span> <br />float: right; </div> <br /> <div id="normdiv"> <br /><span class="bold">DIV #4</span> <br />no positioning </div> <div id="absdiv2" class="opacity"> <br /><span class="bold">DIV #5</span> <br />position: absolute; </div> </body> </html> View Code

    新葡亰496net 5

    分析:

    #4是正常流中国和北美洲从来的因素,所以先被渲染,在最终面部分。

    #2 #3三个左浮动,三个右浮动,接着被渲染。互相不会因为z-index值被覆盖。见下图。

    #1 #5为已定位的因素,最终被渲染,当浏览器窗口变小时,#5在#1上面,因为HTML文档中#5在#1后面。见下图。

     新葡亰496net 6

    挑战:

    品尝使革命<span>成分堆在雪白和淡红<span>的背后,不要打破以下法则:

    • 并非以另外方法退换HTML标识
    • 决不增加/修改任何因素的z-index属性
    • 不要加多/修改任何因素的position属性

    假令你找到了答案,那么它应有像上边那样:

    新葡亰496net 7

    <span style="">优先级最高</span>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>利用定位来体现垂直局中的图片</title>
    <style type="text/css">
    .miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}
    .miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
    .miao span img{border:dashed 1px green;}
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .miao{position:relative;overflow:hidden;}
    .miao span{position:absolute;left:50%;top:50%;}
    .miao span img{position:relative;left:-50%;top:-50%;}
    </style>
    <![endif]-->
    </head>
    <body>
    <h1>固定高宽的器皿中,图片垂直局中。</h1>
    <p>深翠绿容器是span,指标是使协和的左上角与容器主旨点对齐。鲜紫灰是现实图片,再度设置负值使和煦的中央点和父容器的宗旨点重合,最后达到垂直局中的指标。</p>
    <div class="miao">
     <span><img src="" alt="Logo" /></span>
    </div>
    <hr />
    <div class="miao" style="width:300px;height:80px;">
     <span><img src="ttp://bbs.blueidea.comult/logo.gif" alt="Logo" /></span>
    </div>
    <hr />
    <div class="miao" style="width:500px;height:220px;">
     <span><img src="" alt="Google" /></span>
    </div>
    </body>
    </html>

    聚成堆上下文

    同贰个父元素上边包车型大巴因素会受父成分的堆集顺序影响,所以聚积上下文是大家领会z-index和堆积顺序的要害。(下边为了简化,我们称堆积上下文为层。)

    每贰个层都有独一的根节点。当一个要素成立三个层,那么它的全体子成分都会遭遇父成分的积聚顺序影响。意味着假诺一个要素位于二个低于地方的层,那你z-index设置得再大,它也不会冒出在别的层成分的方面。

    前几日我们来讲说什么样状态下会生出新的层:

    • 当贰个因素位于HTML文书档案的最外层(<html>元素)
    • 当一个因素被一定了同期存有三个z-index值(不为auto)
    • 当二个因素被安装了opacitytransformsfilterscss-regionspaged media等属性。

    一二条条条框框,Web开辟者都精晓,即便她们不必然知道怎么描述

    末尾一条,是过多非w3c规范内部的稿子相当少涉及的。日常来说,如若三个CSS属性须要做一些特效的话,它都会成立二个新的层。

    影响积聚顺序的元素有大多,作者引入您去看w3c标准,那篇作品大家注重探寻关于层的源委。

    四、z-index

    默许的堆成堆顺序上边说了,要想改动 成分的堆放顺序就得用到z-index。

    Note:前三种情状中,即便有成分之间的交汇覆盖,然则它们都以高居同二个z-layer的。因为未有安装z-index属性,私下认可的渲染层即是layer 0。所以要留心,不一致层瓜月素之间覆盖是自然的,可是一样层中的成分也会发送覆盖。

    z-index只适用于已经固化的要素(即position:relative/absolute/fixed)。

    举例:

    新葡亰496net 8<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stacking without z-index</title> <style type="text/css"> div { font: 12px Arial; text-align: center; opacity: 0.7; } .bold { font-weight: bold; } #新葡亰496net,normdiv { z-index: 8; height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; } #reldiv1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #reldiv2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #absdiv1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; } #absdiv2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; } </style> </head> <body> <br /><br /> <div id="absdiv1"> <br /><span class="bold">DIV #1</span> <br />position: absolute; <br />z-index: 5; </div> <div id="reldiv1"> <br /><span class="bold">DIV #2</span> <br />position: relative; <br />z-index: 3; </div> <div id="reldiv2"> <br /><span class="bold">DIV #3</span> <br />position: relative; <br />z-index: 2; </div> <div id="absdiv2"> <br /><span class="bold">DIV #4</span> <br />position: absolute; <br />z-index: 1; </div> <div id="normdiv"> <br /><span class="bold">DIV #5</span> <br />no positioning <br />z-index: 8; </div> </body> </html> View Code

    新葡亰496net 9

    赶尽杀绝方案:

    那几个化解方法是在率先个<div>里(樱草黄<span>的父节点)增加一个低于1的opacity属性值。下边正是被增多的CSS的例子:

    div:first-child {
      opacity: .99;
    }
    

    一旦您今后异常受惊,但是依然百思不得其解,何况不相信opacity能调整哪些成分堆在后面,那么是时候看看关于体制的文书档案了。当第贰遍在这几个标题上被困扰时自己同一很吃惊。

    期望接下去的原委能够令你对那几个主题素材更精晓些。

    (2)五个选拔器的先行级总计
    比方,用1意味标签选取器,10意味类选用器,100表示ID选用器,一千表示行内样式
    H2{color:#FF0000} 优先级 1
    .news h2{color:#0000FF} 优先级 11
    div.news h2{color:#00FF00} 优先级 12
    div#news h2{color:#FFFF00} 优先级 102

     

    一律层里面包车型客车堆积顺序

    下边是大同小异层里面包车型客车堆集顺序(从后到前):

    • 层的根成分
    • 被固化了得成分并且z-index值为负,相同z-index的状态下,依据HTML成分的书写顺序排列,下边同样。
    • 尚未被定位的成分
    • 被一定的要素,而且z-index值为auto
    • 被固定了的因素并且z-index值为正。

    注意:z-index值为负的要素相比较杰出,他们会先被绘制,意味着她们得以出现在其余因素的背后,以致现身在它的父成分后边。然则需求条件是该因素必需与父成分处于同样层,而且父成分不是以此层的根成分。三个很好的例证

    精晓了怎么着和怎么着时候会爆发二个新的层,那么后一次一旦您遇见z-index值设了比十分的大,不过不起作用的话就去寻访它的祖先是还是不是发生了四个新的层。

    五、stacking context

    缘何上个例子申月素的积聚顺序受z-index的影响吗?因为那些要素有个别异样的习性触发它们生活积聚上下文(stacking context)。

    难点来了,什么样的成分会转换聚成堆上下文呢?符合上面准绳之一的:

    • 根元素(即HTML元素)
    • 已定位成分(即绝对定位或相对稳固)而且z-index不是暗中同意的auto。
    • a flex item with a z-index value other than "auto",
    • 要素opacity属性不为1(See the specification for opacity)
    • 元素transform不为none
    • 元素min-blend-mode不为normal
    • 要素filter属性不为none
    • 元素isolation属性为isolate
    • on mobile WebKit and Chrome 22 , position: fixed always creates a new stacking context, even when z-index is "auto" (See this post)
    • specifing any attribute above in will-change even you don't write themselves directly (See this post)
    • elements with -webkit-overflow-scrolling set to "touch"

    在堆积上下文(stacking context)中 ,子成分的聚积顺序依旧遵守上述准则。注重是,子成分的z-index值只在父成分范围内立竿见影。子堆积上下文被作为是父堆集上下文中三个独立的模块,相邻的聚积上下文完全没什么。

    计算几句:

    渲染的时候,先分明小的stacking context中的顺序,贰个小的stacking context明确精晓后再将其坐落父stacking context中聚积。有种由内而外,由小及大的以为。

    举个例子来讲:HTML结果如下,最外层是HTML成分,富含#1 #2 #3,#3中又满含着#4,#5,#6。

    Root(HTML)

    • DIV #1
    • DIV #2
    • DIV #3
      • DIV #4
      • DIV #5
      • DIV #6

    新葡亰496net 10<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "; <html xmlns="" xml:lang="en"> <head> <title>Understanding CSS z-index: The Stacking Context: Example Source</title> <style type="text/css"> * { margin: 0; } html { padding: 20px; font: 12px/20px Arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px solid #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px solid #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px solid #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px solid #009; padding-top: 125px; background-color: #ddf; text-align: center; } </style> </head> <body> <div id="div1"> <h1>Division Element #1</h1> <code>position: relative;<br/> z-index: 5;</code> </div> <div id="div2"> <h1>Division Element #2</h1> <code>position: relative;<br/> z-index: 2;</code> </div> <div id="div3"> <div id="div4"> <h1>Division Element #4</h1> <code>position: relative;<br/> z-index: 6;</code> </div> <h1>Division Element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>Division Element #5</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>Division Element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> </body> </html> View Code

    效果:

    新葡亰496net 11 

     剖判一下:

    1、因为设置了div {opacity: 0.7; position: relative;},所以#1~#6的z-index都以有效的。

    2、为什么#4的z-index比#1高,不过却在#1下面?因为#4的z-index固然值大,但它的成效域在含有块#3内,而#1的z-index的作用域在html内,和#3同属html,而#3的z-index小于#1。

    3、为什么#2的z-index值比#5的大,还在下边?同上。

    4、#3的z-index是4,但该值和#4,#5,#6的z-index不具备可比性,它们不在贰个上下文景况。

    5、怎么着轻便的推断多少个成分的堆积顺序?

    z-index对堆放顺序的调节类似于排版时候一大章下多少个小节的表率,或许版本号中一个大的版本号跟着小版本号。

    Root-z-index值为暗许auto,即0

    • DIV #2 - z-index 值为2
    • DIV #3 - z-index 值为4
      • DIV #5 - z-index值为 1,其父成分z-index值 4,所以最后值为4.1
      • DIV #6 - z-index值为 3,其父成分z-index值 4,所以最后值为4.3
      • DIV #4 - z-index值为 6,其父元素z-index值 4,所以最后值为4.6
    • DIV #1 - z-index 值为5

    想看更加多例子,可参照他事他说加以考察作品最终的能源链接。

    货仓顺序

    Z-index看上去如此归纳:高的z-index堆在低的z-index的先头,对吗?那事实上是错的,是z-index难题的一部分。它看上去如此的粗略,乃至于大多开垦者未有花相应的小时去读相关的平整。

    每贰个在HTML文书档案中的成分不仅可以够在别的因素的前头,也得以在别的因素的末尾。这就是所谓的宾馆顺序。决定以此顺序的平整被充足理解的定义在表明文书档案中,但是就好像此前小编早就涉及过,那些文书档案没有被非常多开拓者们一起弄了然。

    当z-index和position属性不被概括在内时,这个准则极度轻巧:基本上,货仓顺序和因素在HTML中冒出的次第相同。(好呢,其实是有有个别犬牙相制的,不过一旦您不选拔压缩边界来重叠行内成分,你只怕不会境遇边界难点。)

    当您把岗位属性也包蕴在内介绍时,任何固定成分(和她们的子成分)都在非定位成分前被显示出来。(说一个因素被“定位”意思是它有一个不一样于静态的岗位值,比如相对的,相对的,等等。)

    最终,当z-index被聊到时,事情变的一部分复杂。最早,很当然的例如带有高z-index值的要素会在满含低z-index值的成分前边,可是后来开掘没那么简单。首先,z-index只对一定成分起效果。要是你品味对非定位成分设定一个z-index值,那么早晚不起成效。其次,z-index值能 成立旅馆上下文蒙受,何况忽然意识类似轻便的东西变的一发纵横交叉了。

     

     

    总结

    说了如此多,大家来给前面包车型地铁代码加上积聚顺序。

    XHTML

    <div><!-- 1 --> <span class="red"><!-- 6 --></span> </div> <div><!-- 2 --> <span class="green"><!-- 4 --><span> </div> <div><!-- 3 --> <span class="blue"><!-- 5 --></span> </div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div><!-- 1 -->
      <span class="red"><!-- 6 --></span>
    </div>
    <div><!-- 2 -->
      <span class="green"><!-- 4 --><span>
    </div>
    <div><!-- 3 -->
      <span class="blue"><!-- 5 --></span>
    </div>

    当咱们设置了opacity现在成为上面那样。

    XHTML

    <div><!-- 1 --> <span class="red"><!-- 1.1 --></span> </div> <div><!-- 2 --> <span class="green"><!-- 4 --><span> </div> <div><!-- 3 --> <span class="blue"><!-- 5 --></span> </div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div><!-- 1 -->
      <span class="red"><!-- 1.1 --></span>
    </div>
    <div><!-- 2 -->
      <span class="green"><!-- 4 --><span>
    </div>
    <div><!-- 3 -->
      <span class="blue"><!-- 5 --></span>
    </div>

    红色的`从6变成1.1`,小编用’.’来标识它是新生成的层里面包车型大巴首先个因素。

    最后大家来计算一下为何日光黄的会去到下面: 一开始有两个层,一个由根节点产生,一个由设置了`z-index:1`并且`position:absolute`的红色发出。当我们设置了opacity时,发生了第多个层,并且第多个层把浅黑灰`产生的层包裹了,意味着刚开始的z-index的作用域只在第三个层里面。而所有的

    `都未曾稳固依然z-index,所以她们的聚积顺序根据HTML出现顺序排列,于是第两个层就去到上面。

    六、 合理利用z-index数值

    如若现有八个堆放的层,从上到下分别为:DIV3,DIV2,DIV1,设置时以100为距离,设置DIV1的z-index为0,DIV2的z-index为100,设置DIV3的z-index为200。那样后期要是急需在DIV1和DIV2之间走入一些层的话,以10为距离,设置z-index为10,20等。再须要向z-index0和z-index10时期步入一层的话以5为距离。那样的写法能够方便中期扩充增加内容。

    尽量幸免给z-index使用负值。当然不是纯属的,譬喻在做图像和文字替换的时候能够使用负值。

    宾馆上下文

    一组具备协同双亲的要素,根据仓库顺序一同前行或向后活动构成了所谓的旅舍上下文。充裕通晓货仓上下文是实在主宰z-index和库房顺序工作原理的重大。

    每 一个储藏室上下文都有贰个HTML成分作为它的根成分。当三个新的仓库上下文在二个因素上产生,那么这么些库房上下文种限制全体的子成分以货仓的顺序存储在贰个特意的地点。那表示固然八个因素被含有在地处尾部仓库顺序的库房上下文中,那么就从不章程先出现于别的处于越来越高的旅社顺序的区别仓库上下文成分,尽管z-index值是十亿也非凡!

    前天,仓库上下文有二种艺术能够在叁个要素上形成:

    • 当八个要素是文书档案的根成分时(<html>成分)
    • 当一个要素有三个position值并不是static,有三个z-index值并非auto
    • 当一个成分有贰个opacity值小于1

    前两种变异仓库上下文的方法具备相当大要思并且被广大Web开辟者所知道(即使他们不明白那么些被称之为何)。第二种格局(opacity)差不多一直没在w3c表明文书档案之外被谈到过。

    *{font-size:12px;} //通用选用器 ie6不协助,少用
    h1{font-size:12px;} // 标签选拔器
    <div class=""></div> //类样式 【使用最多】
    <div id=""></div> // id 选择器 【多用于js调用,id唯一】

     

    引入阅读

    • Elaborate description of Stacking Contexts
    • The stacking context
    • The Z-Index CSS Property: A Comprehensive Look

      1 赞 3 收藏 评论

    新葡亰496net 12

    七、能源链接

    MDN z-index

    understanding css z-index

    w3c z-index

     

    一、z-index z-index用来支配元素重叠时堆成堆顺序。 适用于 :已经固化的要素(即position:relative/absolute/fixed)。 一...

    用饭馆顺序决定三个要素的岗位

    实际,为叁个页面上的持有因素决定全局酒店顺序(富含边界、背景、文本节点、等等)是非常复杂的,而且远远当先了本文陈述的限制(再三回,参照他事他说加以考察文书档案)。可是我们最大的目标,正是中央领悟那些顺序,它亦可在不长一段时间内援助咱们提升CSS开辟的可预测性。所以,让我们打破顺序,分解为独立的库房上下文。

    多成分选用器
    h1,h2{color:red;}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <style type="text/css">
    <!--
    * {margin:0;padding:0}
    div {
     width:500px;
     height:500px;
     border:1px solid #ccc;
     overflow:hidden;
     position:relative;
     display:table-cell;
     text-align:center;
     vertical-align:middle
     }
    div p {
     position:static;
      position:absolute;
     top:50%
     }
    img {
     position:static;
      position:relative;
     top:-50%;left:-50%;
     width:276px;
     height:110px
     }
    -->
    </style>
    <div><p><img src="" /></p></div>

    在同等的旅馆上下文里的库房顺序

    上面是几条基本的平整,来决定在八个独自的货仓上下文里的宾馆顺序(从后迈入):

    1. 库房上下文的根成分
    2. 原则性成分(和他们的子成分)带着负数的z-index值(高的值被堆集在低值的眼下;一样值的要素遵照在HTML中冒出的逐一积聚)
    3. 非固定成分(根据在HTML中冒出的相继排序)
    4. 平昔成分(和他们的子成分)带着auto的z-index值(根据在HTML中冒出的逐条排序)
    5. 固定元素(和她俩的子成分)带着正z-index值(高的值被堆放在低值的前头;同样值的要素依照在HTML中出现的种种堆放)

    注解:定位成分带有负的z-index值被在四个酒馆上下文中先排序,那表示她们出现在享有别的因素的背后。正因如此,它使多少个要素出现在友好父成分之后 成为只怕,那以前一般是不容许的事。当然,这局限于它的父成分与它在同三个库房上下文,并且不是老大酒馆上下文的根成分。一个了不起的事举个例子NicolasGallagher的CSS不用图像裁减阴影。

    后人成分选取器
    子成分采用器

     

    全局仓库顺序

    坚定的明白了为何/什么日期新的货仓上下文变成,同一时控了同三个库房上下文的商旅顺序,以往让您来搜索一个一定元素将出现在全局仓库里的逐条不是那么倒霉了呢?

    幸免不当的基本点是能力所能达到开采新的客栈上下文曾几何时产生。假诺你对一个要素设置了z-index值为十亿然则它从不在库房顺序中迈入移动,检查一下它的祖宗树,看是不是它的父节点产生了库房上下文。倘诺是那样的话,你的z-index值即便有十亿也不会给您带来益处。

    .new li{border:1px solid #ccc;} 后代全数因素【特别哦】
    .new > .title{color:red;} 子代成分 【独有一代】【少用】
    <div class="new">
    <div class="title">title</div>
    <div class="content">
    <li>集团创造</li>
    </div>
    </div>

     

    包扎抢救和治疗

    回来在此之前的原始难点,小编早已重新建立了那一个HTML的组织,增加了部分评释,每贰个标签指明了它在仓房里的逐个。这一个顺序是倘使最先的CSS。

    <div><!-- 1 -->
      <!-- 6 -->
    </div>
    <div><!-- 2 -->
      <!-- 4 -->
    </div>
    <div><!-- 3 -->
      <!-- 5 -->
    </div>
    

    那是大家熟谙的,所以结果在我们的预想之中,但当大家增添opacity到第二个<div>,货仓顺序像下边那样改换:

    <div><!-- 1 -->
      <!-- 1.1 -->
    </div>
    <div><!-- 2 -->
      <!-- 4 -->
    </div>
    <div><!-- 3 -->
      <!-- 5 -->
    </div>
    

    span.red曾经的逐个是6,但现在改为1.1。作者一度选择“.”来标明多个新的上下文情状的多变。span.red以后是非常新的上下文的率先个要素。

    未来就像是更清晰了,关于为何栗褐盒子跑到别的盒子的前面。原始的例证只含有多少个货仓上下文,根成分和多变span.red的百般。当大家增添opacity到span.red的父节点上,变成了第一个货仓上下文,结果显示在span.red上的z-index值只好使用在极其新的库房上下文 中。因为首个<div>(应用opacity的不行)和它的男子成分未有position只怕z-index值的汇聚,他们的库房顺序是由 他们在HTML里的源顺序决定的,约等于说第三个<div>,和它的仓库上下文里的具备因素被第二个和第八个<div>成分分 离。

    注:以上请在chrome浏览器下测验!

    来源:关于z-index的那个事情

    div.box class="box" 的 div
    div#header id="header"的div

     

    其他html成分都有 width height padding margin border background

    body{font:bold italic 24px 金鼎文;} 简写的样式
    letter-spacing: 字间距
    line-height:150% 行高1.5倍

    padding:0px 0px 1px; 上 左右 下
    单行文本上下居中li{height:30px; line-height:30px;}
    li{list-style-type:none; }

    伪类选用器 <a>
    a:link,a:visited{text-decoration:none;}
    a:hover{text-decoration:underline;}

    a.a1:link{color:red;} [厉害哦]

    <li><a>xx</a></li>
    <li><a class="a1">xxxxx</a></li>

    background-color
    background-image
    background-attachment 移动滚动条时,背景固定fix 仍然滚动 scroll

    <style type="text/css">
    body,div,li{padding:0; margin:0;}
    ul,li{list-style:none;}
    li{
    padding-left:30px;
    background-repeat:no-repeat;
    background-image:url();
    background-position:left center;} li背景图片水平左对齐 垂直居中对齐
    </style>

    行内成分 span a img 

    行内成分的大小由内容决定,设置 width 和 height是看不到效果的

    行内成分转块成分

    <span style="float:left;"></span> 产生了块成分

    a span{display:block;} //行内成分转成块成分

    div{display:inline;} //块成分转行内成分

    行内成分,经过什么样操作,能够成为“块成分”?
    扭转、display:block、固定定位、绝对定位

    <span style="float:right;">右对齐
    float成分不占空间,不占px

    任何因素都足以改造 float
    具有图片float:left; 只要宽度缺乏,就能自动换行,就有如下效果
    <ul><li><img src=""/></li></ul>
    图片1 图片2
    图片3 图片4

    p{width:580px; padding:20px 10px;} 宽就是600px了,添加padding margin 要减小width

    每一个div都定义高度
    li{float:left;}
    font-weight:bold;

    <div class="class1 class2"></div> 加七个样式

    一行几个东西,贰个float:left;二个float:right;

    css定位
    position: static(静态定位) fixed(固定定位) relative 相对固化 absolute 绝对定位
    left 设置成分距离左边多少路程
    right top bottom

    其他因素,私下认可是静态定位
    固定定位:相对于浏览器窗口(在线QQ) 固定成分,脱离文档,不占空间,是”块元素“
    周旋固定:是周旋于”它原来的协调“来进展的摇荡,所占空间保留(天猫商城图片新品标记)
    position:relative;
    right:-100px; //用负数

    纯属定位:相对于它的先世(上级依旧上上级,最后是<body>)定位,不占空间

    结缘使用
    上面相对 position:relative;
    切切实实这多少个成分 position:absolute; top:-10px; right:-30px;

    CSS HACK 实在消除不了包容性难题,能够尝试使用css hack
    CSS HACK,针对不一样浏览器IE6 IE7 IE8 火狐,编辑差别的CSS代码的经过,就叫CSS HACK。
    (1)CSS属性的HACK:
    div{
    background-color:red; //全部浏览器都帮助 别的 展现 red
    *background-color:green; //ie6和IE7支持 ie7 显示 green
    _background-color:blue; //IE6认识 最终 ie6 显示 blue

     

    下面的css hack  未验证

    CSS 哈克的落到实处方式:

             (1)IE条件语句:只在IE9-有效

                       <!--[if IE]> 小于IE10的浏览器会看到此句<![endif]-->

                       <!--[if IE 6]> IE6看到此句<![endif]-->

                       <!--[if lt IE 8]> 小于IE8的浏览器会看到此句 <![endif]-->

                       <!--[if lte IE 8]> 小于等于IE8的浏览器会看到此句 <![endif]-->

                       上述标准语句中能够停遗弃何CSS/HTML/JS语句。

             (2)选用器前缀

                       <style>

                                .content{ }        全部浏览器都能清楚的选取器

                                *html  .content{}                      只有IE6能知晓的选用器

                                * html     .content{}                   独有IE7能知道的选拔器

                       </style>

             (3)属性前缀

                       <style>

                                .content{

                                         -webkit-animation: anim1  3s;      

                                         -moz-animation: anim1  3s;

                                         -o-animation: anim1  3s;

                                         background: red;               /*享有浏览器都能辨识*/

                                         *background:green;         /*IE6/IE7能识别*/

                                         _background:blue;            /*IE6/IE7能识别*/

                                         background:yellow;        /*IE能识别*/

                                         background: yellow9; /*IE9 能识别*/

                                         background: pink !important;  /*IE6不能够甄别*/

    }

                       </style>

    css 优化

    页面访谈速度优化

             (0)硬件/互联网优化

             (1)数据库优化

             (2)服务器优化

             (3)前端优化: HTML优化、CSS优化、JS优化

      CSS优化方案:

             优化原则:尽恐怕裁减HTTP央浼数量;尽恐怕减少每趟诉求的数量大小

             优化措施:

             (1)CSS Sprites:背景图滑动门、把众多的小背景图拼接为一副大图——百度“CSS Pepsi-Colas在线”能够找到相当多这么的工具

             (2)把CSS放到页面最上部,多用<link href=”x.css”/>代替@import url(x.css)

             (3)防止选择CSS表明式

             (4)防止空的src和href值

             (5)巧用浏览器缓存,把CSS放在尽只怕少的HTML外界文件

             (6)首页中尽量不要外界CSS

             (7)不要在HTML中缩放图像

             (8)对JavaScript文件和CSS文件进行削减(剔除空白/换行/注释等),减小文件大小。可利用类似YUI Compressor等工具    Yahoo UI Libary

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:index鲜为人知的事情,index的一些事

    关键词:

上一篇:新葡亰496netcss一些细问题,刨根问底

下一篇:没有了