HTML DOM 快速導覽 - 樣式設定的屬性 zIndex

CSS 樣式表 (cascading style sheets) 的 z-index 性質 (property) 可控制 HTML 元素 (element) 的重疊順序，亦可由 JavaScript 程式取得元素物件，再用 style 的屬性 (attribute) zIndex 進行設定。



zIndex 使用數字作設定。


舉例如下
function run00(demo) {
    demo.style.zIndex = "1";
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：style061.js
    功能：示範 JavaScript 程式 
    作者：張凱慶
    時間：西元 2011 年 8 月 */


此例將相關元素設定為 hidden
demo.style.zIndex = "1";


我們以下面的 HTML 文件載入
<html>
<head>
<title>網頁標題</title>
<script src="style061.js" type="text/javascript"></script>
<style>
img {
    width: 30%;
    height: 30%;
    position: absolute;
    left: 25%;
    z-index: -1;
}
</style>
</head>
<body>
<img src="example.jpg" onclick="run00(this);">
<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/
     檔名：style061.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (browser) 開啟，點擊圖片後，圖片從浮水印移到最上層顯示



中英文術語對照
CSS 樣式表cascading style sheets
性質property
元素element
屬性attribute
瀏覽器browser


您可以繼續參考
CSS 範例

樣式設定物件 style


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/CSS
https://developer.mozilla.org/en/CSS/z-index
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)