技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

如何讓某一DIV層顯示在上面？z-index解決問(wèn)題

作者:admin    時(shí)間:2017-7-28 14:18:26    瀏覽:

在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，有時(shí)遇到某個(gè)DIV內(nèi)容被其他層覆蓋擋住了，怎么辦呢？我們?nèi)绾巫屇骋籇IV層顯示在上面？其實(shí)，使用css屬性 z-index 就能解決問(wèn)題。

設(shè)置z-index讓div層wrap2在上面

設(shè)置z-index讓div層wrap2在上面

html代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>z-index 設(shè)置層上下位置</title>
<style>
.wrap1, .wrap2, .wrap3{width:200px; height:200px;}
.wrap1{
  background:#fcc;
  position:absolute;
  top:80px;
  left:200px;
  z-index:300; /* 設(shè)置層上下位置 */
}
.wrap2{
  background:#cfc;
  position:absolute;
  top:50px;
  left:150px;
  z-index:500; /* 設(shè)置層上下位置 */
}
.wrap3{
  background:#ccc;
  position:absolute;
  top:20px;
  left:100px;
  z-index:100; /* 設(shè)置層上下位置 */
}
</style>
</head>

<body>
<div class="wrap1">
  這里是wrap1
</div>
<div class="wrap2">
  這里是wrap2
</div>
<div class="wrap3">
  這里是wrap3
</div>
</body>
</html>

execcodegetcode

代碼分析：

1、設(shè)置三層上下位置的屬性是 z-index，數(shù)值小的在下面，數(shù)值大的在上面。

2、css屬性 z-index 兼容所有瀏覽器，不用擔(dān)心在IE8瀏覽器上不起作用。

注意問(wèn)題：

在IE瀏覽器上，即使設(shè)置 z-index 也不能讓div位于下拉菜單控件 select 的上面，同樣也不能位于flash的上面，但是在Firefox、Chrome、360等主流瀏覽器上是沒(méi)有問(wèn)題的。

如何用Javascript設(shè)置div的z-index？

JavaScript 語(yǔ)法是：

object.style.zIndex="1"

假如div的id是 div1 ，則Javascript就可以這樣寫：

document.getElementById("div1").style.zIndex="1";

注意 zIndex 的大小寫要正確。

有關(guān)z-index的一些知識(shí)

z-index 定義和用法

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。該屬性設(shè)置一個(gè)定位元素沿z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。

z-index：auto | number

默認(rèn)值：auto 堆疊順序與父元素相等

number：無(wú)單位的整數(shù)值，可為負(fù)數(shù)

JavaScript 語(yǔ)法： object.style.zIndex="1"

注意問(wèn)題：

z-index 屬性適用于那些被定義了除 position:static 外任意屬性的元素中。即 z-index 僅能在定位元素上奏效（position: absolute | relative | fix）。

stacking context & stack level & z-index 是什么

stacking context 堆疊上下文

每個(gè)定位元素都?xì)w屬于一個(gè)stacking context（即堆疊上下文，以下統(tǒng)一用堆疊上下文），最初的堆疊上下文（即根部堆疊上下文）是由根元素產(chǎn)生（一般頁(yè)面的根元素是body），而其他的堆疊上下文則由定位元素產(chǎn)生（此定位元素的z-index 被定義一個(gè)非auto 的z-index 值），定位子元素會(huì)以這個(gè)基準(zhǔn)堆疊上下文為參考，用相同的規(guī)則來(lái)決定層疊順序。

觸發(fā)stacking context

1. 定位元素并且定義了z-index為非auto；

2. FF, Safari, Chrome下元素設(shè)置opacity屬性（1除外）會(huì)產(chǎn)生stacking context；(除了Opera)

3. IE6,7下的定位元素，無(wú)論設(shè)置了z-index，或無(wú)論z-index設(shè)置成什么值，都會(huì)產(chǎn)生新的 stacking context。

stack level 堆疊級(jí)別

在一個(gè)堆疊上下文中的每個(gè)box ，都有一個(gè)stack level（即堆疊級(jí)別，以下統(tǒng)一用堆疊級(jí)別），它決定著在同一堆疊上下文中每個(gè)box 在z 軸上的顯示順序。同一堆疊上下文中，堆疊級(jí)別值大的顯示在上，堆疊級(jí)別值小的顯示在下，同一堆疊級(jí)別遵循后來(lái)居上的原則（back-to-front ）。不同堆疊上下文中，子元素顯示順序以父級(jí)的堆疊上下文的堆疊級(jí)別來(lái)決定顯示的先后情況。于自身堆疊級(jí)別無(wú)關(guān)。說(shuō)白了就是父元素的堆疊上下文的堆疊級(jí)別決定了子元素堆疊級(jí)別將來(lái)的發(fā)展，父元素堆疊級(jí)別低，則子元素堆疊級(jí)別就必然比父元素堆疊級(jí)別高的子元素堆疊級(jí)別低，即使這個(gè)子元素在他父元素內(nèi)部的堆疊級(jí)別再高也無(wú)濟(jì)于事。

z-index

頁(yè)面中元素在z軸方向上的排列，先由堆疊上下文決定，如果是相同的堆疊上下文那么由堆疊級(jí)別決定（后來(lái)居上原則），如果又是相同的堆疊級(jí)別（同一個(gè)父元素），則由z-index 決定。

這里最容易搞混的就是堆疊級(jí)別和z-index ，大多數(shù)時(shí)候覺(jué)得他們是同一個(gè)東西，而事實(shí)上他們還是有區(qū)別的，個(gè)人認(rèn)為，當(dāng)沒(méi)有z-index 時(shí)候，我們所依靠的準(zhǔn)則是以堆疊級(jí)別的后來(lái)居上的原則來(lái)判定順序。如果在一個(gè)堆疊上下文，一般就是在body 下，倆個(gè)不同的z-index 的時(shí)候，以z-index 大小來(lái)判定上下順序，而我們平時(shí)印象里留意的最多的就是z-index ，所以往往誤解了堆疊級(jí)別和z-index 的區(qū)別。

標(biāo)簽: css  z-index  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */