當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

css z-index空間位置

css z-index空間位置

更新時間:2023-06-11 文章作者:未知 信息來源:網絡 閱讀次數:

網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。

【實例介紹】

z-index空間位置
CSS可以處理高度、寬度、深度三個維度。在前面的課程中,我們已經了解了前兩個維度。
在本課中,我們將學習如何令不同元素具有層次。簡言之,就是關于元素堆疊的次序問題。
z—index屬性設置元素的堆疊順序,擁有更高堆疊順序的元素總是會處于堆疊順序較低的元
素的前面。

【基本語法】

z-index:auto | 數字

【語法介紹】

z—index屬性的值為整數,可以為正數也可以為負數。當塊被設置為position時.該值便可
設置各塊之間的重疊高低關系,默認的z-index值為0。auto參數遵從其父對象的定位:數字必
頁是無單位的整數值,可以取負值

【實例代碼】

<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  裙長87CM  袖長60CM</p>   <p>這款連衣裙部分下擺雪紡花在右邊,此類不算質量問題。</p>   <p>小店商品基本上都是現貨銷售,但是由于商品流動迅速和難以預測難免會出現暫時的缺貨斷碼斷色問題,所以請親們拍前務必和掌柜聯系詢問是否有貨; 對于直接拍下付款但沒有現貨的情況,掌柜會第一時間主動聯系協商推遲發貨或者退款問題。  </p>   <p><br> </p> </div> </body> </html>

【代碼分析】

此段代碼中,首先在<head></head>之間用<style>定義了img標記中的position屬性為
absolute,z-index為1表示默認最底層,定義了text標記中的position屬性為absolute。z-index,
為2,然后分別對圖像和段落文本應用img和text樣式。由于圖像的z-index是1,因此它在文
本的后面出現。在瀏覽器中預覽,效果如圖18.17所示。

空間位置

 【素材及源碼下載】

請點擊:css z-index空間位置 下載本實例相關素材及源碼

 


網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

亚洲嫩草影院久久精品