當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > DIV+CSS > css z-index空間位置

css z-index空間位置

2012/11/27 15:08:22作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

z-index空間位置
CSS可以處理高度、寬度、深度三個(gè)維度。在前面的課程中，我們已經(jīng)了解了前兩個(gè)維度。
在本課中，我們將學(xué)習(xí)如何令不同元素具有層次。簡(jiǎn)言之，就是關(guān)于元素堆疊的次序問題。
z—index屬性設(shè)置元素的堆疊順序，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元
素的前面。

【基本語法】

z-index：auto | 數(shù)字

【語法介紹】

z—index屬性的值為整數(shù)，可以為正數(shù)也可以為負(fù)數(shù)。當(dāng)塊被設(shè)置為position時(shí)．該值便可
設(shè)置各塊之間的重疊高低關(guān)系，默認(rèn)的z-index值為0。auto參數(shù)遵從其父對(duì)象的定位：數(shù)字必
頁是無單位的整數(shù)值，可以取負(fù)值

【實(shí)例代碼】


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>層疊順序</title>
<style type="text/css">
<!--
.img {
 position:absolute;
 top: 25px;
 right: 20px;
 left: 25px;
 bottom: 20px;
 z-index: 1;
 width: 394px;
 height: 398px;
}
.text {
 font-size: 12px;
 position: absolute;
 top: 35px;
 right: 20px;
 left: 38px;
 bottom: 25px;
 z-index: 2;
 height: 130px;
}
-->
</style>
</head>
<body>
  <div><img src="images/bj.jpg" width="330" height="352" class="img" /></div>
<div class="text">
  <p>尺寸：均碼</p>
  <p>肩寬36CM  胸圍86CM  裙長(zhǎng)87CM  袖長(zhǎng)60CM</p>
  <p>這款連衣裙部分下擺雪紡花在右邊，此類不算質(zhì)量問題。</p>
  <p>小店商品基本上都是現(xiàn)貨銷售，但是由于商品流動(dòng)迅速和難以預(yù)測(cè)難免會(huì)出現(xiàn)暫時(shí)的缺貨斷碼斷色問題，所以請(qǐng)親們拍前務(wù)必和掌柜聯(lián)系詢問是否有貨； 對(duì)于直接拍下付款但沒有現(xiàn)貨的情況，掌柜會(huì)第一時(shí)間主動(dòng)聯(lián)系協(xié)商推遲發(fā)貨或者退款問題。  </p>
  <p><br>
</p>
</div>
</body>
</html>

【代碼分析】

此段代碼中，首先在<head><／head>之間用<style>定義了img標(biāo)記中的position屬性為
absolute，z-index為1表示默認(rèn)最底層，定義了text標(biāo)記中的position屬性為absolute。z-index，
為2，然后分別對(duì)圖像和段落文本應(yīng)用img和text樣式。由于圖像的z-index是1，因此它在文
本的后面出現(xiàn)。在瀏覽器中預(yù)覽，效果如圖18．17所示。

空間位置

 【素材及源碼下載】

請(qǐng)點(diǎn)擊：css z-index空間位置 下載本實(shí)例相關(guān)素材及源碼

 

標(biāo)簽： css z-index  空間  位置