CSS的z-index實(shí)例代碼
發(fā)布時(shí)間：2012-02-25 13:48:24 作者：佚名 
我要評(píng)論
我要評(píng)論寫了個(gè)最簡(jiǎn)單的DEMO，演示了3個(gè)DIV互相遮蓋的情況。記住：z-index要配合position屬性才有效
效果圖：
全部代碼：
復(fù)制代碼
代碼如下:<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS z-index demo - Edi</title>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
</script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.box
{
width: 256px;
padding: 5px;
border: 1px solid #000;
margin: 20px;
height: auto;
}
#box1
{
background-color: #F4F4F4;
}
#box2
{
background-color: #FFC;
position: relative;
z-index: 1;
margin-top: -80px;
margin-left: 50px;
}
#boxinbox
{
background-color: #F00;
position: relative;
z-index: 2;
margin-left: -20px;
width: 80px;
}
</style>
</head>
<body>
<div class="box" id="box1">
<div>Tasks</div>
<div>
SharePoint 2010客戶端開發(fā)身份驗(yàn)證，如果開發(fā)客戶端運(yùn)行的環(huán)境是在域環(huán)境中，
那么SharePoint是采取默認(rèn)認(rèn)證方式，如果不是域環(huán)境中的機(jī)器，那么就需要下面的認(rèn)證方法。
<div id="boxinbox">HAHA</div>
</div>
</div>
<div class="box" id="box2">
<div>Defects</div>
<div>
開閉原則指的是一個(gè)軟件實(shí)體應(yīng)對(duì)對(duì)擴(kuò)展開發(fā)，對(duì)修改關(guān)閉
(Software entities should be open for extension, but closed for modification)。
這個(gè)原則是說在設(shè)計(jì)一個(gè)模塊的時(shí)候，應(yīng)對(duì)使這個(gè)模塊可以在不被修改的前提下被擴(kuò)展，
換言之，應(yīng)對(duì)可以不必修改源代碼的情況下 改變這個(gè)模塊的行為。
</div>
</div>
</body>
</html>
相關(guān)文章
- z-index最大值,最小值以及同值時(shí)層的高低，做了個(gè)測(cè)試z-index的最大值,有幾個(gè)結(jié)論如下2009-05-28
- z-index屬性簡(jiǎn)介 引用: z-index : auto | number auto：默認(rèn)值。 number：無(wú)單位的整數(shù)值，可為負(fù)數(shù)。 z-index 值較大的元素將疊加在z-index值較小的元素之上。對(duì)2009-05-29
CSS教程:元素層疊級(jí)別及z-index-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
原文：http://rong179.blogbus.com/logs/24966909.html 聲明 定位元素：position屬性值設(shè)置除默認(rèn)值static以外的元素，包括relative，absolute，fixed。 平臺(tái)：win/I2008-10-17- 設(shè)置z-index時(shí)必須要固定位置，這樣設(shè)置它的值時(shí)才能奏效（例如 position:absolute;）下面是示例代碼，在ff3.5.5和ie5.5~ie8.0RC1中通過，大家可以嘗試著不固定其位置試試2009-11-26
CSS教程:網(wǎng)頁(yè)布局定位及z-index解釋-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
聲明 定位元素： position屬性值設(shè)置除默認(rèn)值static以外的元素，包括relative，absolute，fixed。 平臺(tái)：win/IE win/FF z-index 用來(lái)確定定位元素在垂直于顯示屏2008-10-17- IE6/7對(duì)z-index的表現(xiàn)跟IE8及以上瀏覽器不一致。position值為非static時(shí)，如果不設(shè)置z-index屬性，IE6/7下z-index默認(rèn)為0，而IE8及以上瀏覽器z-index為auto，且zindex:auto2012-11-13
一個(gè)關(guān)于CSS Z-index 的東東,解決了我很多疑問
發(fā)現(xiàn)有時(shí)候真得多看看書,以前一直納悶為什么有時(shí)候可以,有時(shí)候不可以,原來(lái)是這個(gè)原因.2011-03-23- 可是真有些日子沒有寫DIV+CSS了，而且對(duì)IE6兼容性的坑碰到的還是不夠多(以前做國(guó)外項(xiàng)目)，所以這次開發(fā)中不可避免的碰見了幾個(gè)問題，尤其是在IE下的 z-index 問題很有意思2013-01-09
CSS元素的層疊與z-index設(shè)置-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
我們?cè)谖恼碌母轮?，特別注重對(duì)新手的輔導(dǎo)，但webjx.com面對(duì)的是廣大的開發(fā)人員，大家可能會(huì)遇到各種各樣的問題，有些問題很不常見，或者應(yīng)用的很少，但我們依然有必2008-10-17- 在這篇文章里，我們會(huì)準(zhǔn)確的說明究竟什么是Z-index，它為什么會(huì)這么不為人所了解，并一起討論一些關(guān)于它的實(shí)際使用中的問題。我們同時(shí)會(huì)描述一些會(huì)遇到的瀏覽器間的差異，2014-10-22