• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    网页设计中Z轴上的放置

    • 2019-03-21 17:52:59
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

    对于网站建设所有定位,最后都不免遇到这样一种情况:两个元素试图放在同一个位置上。显然,其中一个必须盖住另一个——不过,如何控制哪个元素放在“上层”呢?这就引人了属性z-index.

    z-index

    值:<integer> | auto | inherit

    初始值auto

    应用于定位元素

    继承性 无

    计算值 根据指定确定

    利用z-index,可以改变于网站建设元素相互覆盖的顺序。这个属性的名字由坐标系统得来,其中从左向右是x轴,从上到下是y轴。在这种情况下,第三个轴一即从前向后,或者如果网页设计人员愿意,也可以理解为越来越远离用户——则称为z轴。因此,使用z-index 为元素指定沿z轴的值,并相应表示。图10-52描述了这个坐标系。

    在这个坐标系中,有较高z-index值的元素比z-index值较低的元素离读者更近。这会导致有较高z-index值的元素覆盖其他元素,如图10-53所示,这是图10-52的正面图。这也称为叠放。

    所有整数都可以用作为z-index的值,包括负数。如果为元素指定一个负z-index值,会将其移到到离读者更远的位置。也就是说,它会移到叠放栈的更低层。考虑以下样式,如图10-54所示:

    p#first {position: absolute; Cop: 0; left: 0;

    width: 20%; height: 10em; z-index: 8;}

    p#second {position: absolute; top: 0; left: 10%;

    width: 30%; height: 5em; z-index: 4;}

    图10-52: z-index叠放的概念视图

    图10-53:元素如何叠放

    p#third {position: absolute; cop: 15%; left: 5%;

    width: 15%; height: 10em; z-index: 1;}

    p#fourth {position: absolute; top: 10%; left: 15%;

    width: 40%; height: l0em; z-index: 0;}

    图10-54:叠放元素可能相互重叠

    每个网站建设元素都按照其样式定位,不过,z-index值修改了以往的叠放顺序。假设段落按数字顺序指定,一个合理的叠放顺序可能是(从低到高)p#first、p#second. pttthird、p#fourth。这会把p#first放在另外三个元素的下面,而把p#fourth放在所有元素的最前面。现在,因为有z-index属性,叠放顺序则在你的控制之下。

    如前例所示,没有特别要求z-index值是连续的。可以指定任何整数。如果想确定一个元素必定在所有其他元素的前面,可以使用以下规则:z-index: 100000。大多数情况下,这都能满足你的要求,不过,如果把另一个元素的z-index声明为100001 (或更高),该元素则会出现在前面。

    —旦为一个元素指定了z-index值,该元素就会建立自己的局部叠放上下文。这意味着,元素的所有后代相对于该祖先元素都有其自己的叠放顺序。这非常类似于元素建立新包含块的方式。给定以下样式,可以看到如图10-55所示的结果:

    p {border: 1px solid; background:#DDD; margin: 0;}

    b (background:#808080;}

    em {background:#BBB;}

    #one (position: absolute; cop: 0; left: 0; width: 50%; height: 10em; z-index: 10;}

    #two {position: absolute,- top: 5em; left: 25%; width: 50%; height: 10em; z-index: 7;}

    #Chree {position: absolute; top: Hem; left: 0; widtrh: 50%; height: 10em; z-index: 1;}

    #one b {position: absolute; right:-5em; top: 4em; width: 20em; z-indexs -404;}

    #two b {position: absolute; right:-3em; top: auto; z-index: 36;}

    #two em tposition: absolute; bottom:-0.75em; left: 7em; right:-2em; z-index:-42;}

    Kthree b {position: absolute; left: 3em; top: 3.5em; width: 25em; z-index: 23;}

    图10-55:定位元素建立局部叠放上下文

    注意b和em元素在叠放顺序中的位置。当然,这些元素都相对于其父元素准确定位,不过,要特别注意P#two的子元素。尽管b元素在其父元素前面,而em在后面,但它们都在p#three的前面!这是因为z-index值36和-42都相对于p#two,而不是相对于总的文档。从某种意义上讲,P#two及其所有子元素都有共同的z-index值7,而在这个P#two上下文中各元素又有其自己的“次级”z-index。

    换句话说,就好像b元素的z-index为7,36,而em的z-index值为7,-42,这些只是网站建设的反映概念值,规范中没有相应的规定。不过,这样的系统有助于说明如何确定总的迭放顺序。请考虑:

    p#one           10

    p#one b         10,-404

    p#two b         7,36

    p#two           7

    p#two em        7,-42

    p#three b       1,23

    p#three         1

    这个概念框架准确地描述了这些元素以何种顺序叠放。从这个叠放顺序来看,尽管一个网站建设的元素后代可能在该元素的上面或下面,但它们与其祖先元素都归为一组。

    如果一个元素为其后代元素建立了叠放上下文,而且该元素位于此上下文z轴的0位置上,也是如此。因此,可以将框架扩展如下:

    P#one           10,0

    p#one b         10,-404

    P#two b         7,36

    P#two           7,0

    P#two em        7,-42

    p#three b       1,23

    p#three         1,0

    还有一个值要分析。规范对默认值auto有以下说明:

    当前叠放上下文中生成框的栈层次与其父框的层次相同。这个框不会建立新的局部4放上下文。(CSS2.1: 9.9.1)

    因此,如果元素设置为z-index: auto,可以将其处理为z-index: 0。不过现在你可能想知道,如果一个元素是初始包含块叠放上下文的一部分,而且其z-index值为负,此时会发生什么情况。例如,可以想想看以下规则会得到什么结果:

    <body>

    <p style="position: absolute; z-index:-1;">Where am I?</p>

    </body>

    根据叠放规则,body元素与其父元素框在同一个迭放上下文中,因此将是0。它不会建立一个新的叠放上下文,所以绝对定位的P元素与body元素置于相同的迭放上下文中(即初始包含块的叠放上下文)。换句话说,段落放在body元素的后面(被body元素盖住)。如果body有不透明的背景,这个段落会消失。

    不过,只是CSS2中会如此。在网站建设CSS2.1中,叠放规则有所改变,要求元素绝对不会迭放在其鲞放上下文的背景之下。换句话说,考虑以下情况,body元素为其后代建立了一个包含块(例如,假设它是相对定位元素)。作为body元素后代的一个绝对定位元素就不能叠放在body的背景之下,不过可以迭放在body的内容下面。

    写作本书时,即使将body和html元素都设置为有透明的背景,Mozilla和相关浏览器也会完全隐藏段落。这种做法是错误的。即使body有背景,其他用户代理也会把段落放在body的背景之上。根据CSS2.1,这才是正确的行为。由于用户代理的做法不同,所以z-index值为负时会导致不可预料的后果,所以使用要小心,

    当前文章标题:网页设计中Z轴上的放置

    当前URL:http://www.0737dz.com/news/wzzz/Z axis-placed.html

    上一篇:网页设计中替换元素的放置和大小

    下一篇:网页设计中的固定定位

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图