CSS 2.1 快速導覽 - 重疊順序 z-index

z-index 性質 (property) 為 CSS 中用來設定元素 (element) 的重疊順序，利用數字設定。



舉例如下
img {
    width: 30%;
    height: 30%;
    position: absolute;
    left: 25%;
    z-index: -1;
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：visual16.css
    功能：示範 CSS 2.1 樣式表的使用 
    作者：張凱慶
    時間：西元 2011 年 7 月 */


我們以下面的 HTML 文件載入
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" 
      href="visual16.css">
</head>
<body>
<img src="example.jpg">
<div>
You ever have that feeling where you're not sure if 
you're awake or still dreaming?
A prison for your mind.
Free your mind.
Believe the unbelievable.
There is no spoon.
I can only show you the door, you have to walk 
through it.
Choice. The problem is choice.
Then tomorrow we may all be dead, but how would that 
be different from any other day?
I have dreamed a dream, but now that dream has gone 
from me.
Choice is an illusion, created between those with 
power, and those without.
Because I choose to.
Everything that has a beginning has an end.</div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：visual16.html
     功能：示範 CSS 2.1 樣式表的使用 
     作者：張凱慶
     時間：西元 2011 年 7 月 -->


瀏覽器 (broswer) 開啟如下



由於 <img> 設定成絕對定位，因此原本 example.jpg 會蓋到文字上，中間一段的文字會看不到，此例中我們將 <img> 的 z-index 設定為 -1 ，使元素遠離讀者，因此造成浮水印的效果。


中英文術語對照
性質property
元素element
關鍵字keyword
瀏覽器broswer


您可以繼續參考

JavaScript 範例

定位相關


相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁


參考資料
http://www.w3.org/TR/CSS21/visuren.html
https://developer.mozilla.org/en/CSS/z-index
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)