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

贊助商

分類目錄

贊助商

最新文章

搜索

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

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

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

設(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瀏覽器上不起作用。

注意問題：

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

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

JavaScript 語法是：

object.style.zIndex="1"

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

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

注意 zIndex 的大小寫要正確。

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

z-index 定義和用法

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

z-index：auto | number

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

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

JavaScript 語法： object.style.zIndex="1"

注意問題：

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

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

stacking context 堆疊上下文

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

觸發(fā)stacking context

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

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

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

stack level 堆疊級別

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

z-index

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

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

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