CSS z-index 屬性控制div上下層次

時間 2019-11-07

標籤 css index 屬性控制 div 上下層次欄目 CSS 简体版

原文原文鏈接

CSS z-index 屬性控制div上下層次javascript

CSS中 z-indexcss

z-index越大則顯示在頁面的最上面html

CSS z-index 屬性java

http://www.w3school.com.cn/css/pr_pos_z-index.asp: web

定義和用法

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。瀏覽器

註釋：元素可擁有負的 z-index 屬性值。dom

註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！spa

說明

該屬性設置一個定位元素沿 z 軸的位置，z 軸定義爲垂直延伸到顯示區的軸。若是爲正數，則離用戶更近，爲負數則表示離用戶更遠。.net

默認值：	auto
繼承性：	no
版本：	CSS2
JavaScript 語法：	object.style.zIndex="1"

實例

設置圖像的 z-index：code

img
  {
  position:absolute;
  left:0px;
  top:0px;  
  }z-index:-1;

TIY

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>因爲圖像的 z-index 是 -1，所以它在文本的後面出現。</p>
</body>
</html>

瀏覽器支持

全部主流瀏覽器都支持 z-index 屬性。

註釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

可能的值

值	描述
auto	默認。堆疊順序與父元素相等。
number	設置元素的堆疊順序。
inherit	規定應該從父元素繼承 z-index 屬性的值。

TIY 實例

Z-index
Z-index 可用於將在一個元素放置於另外一元素以後。

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>這是一個標題</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默認的 z-index 是 0。Z-index -1 擁有更低的優先級。</p>
</body>

</html>

Z-index
上例中的元素已經更改了 Z-index。

<html>
<head>
<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}</style>
</head>

<body>
<h1>這是一個標題</h1>
<img class="x" src="/i/eg_mouse.jpg" mce_src="i/eg_mouse.jpg" />
<p>默認的 z-index 是 0。Z-index 1 擁有更高的優先級。</p>
</body>

</html>

改變元素的堆疊順序：

http://www.w3school.com.cn/htmldom/prop_style_zindex.asp

<html>
<head>
<style type="text/css">
#img1
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
<script type="text/javascript">
function changeStackOrder()
{
document.getElementById("img1").style.zIndex="1";
}
</script>
</head>
<body>

<h1>This is a Heading</h1>

<img id="img1"src="bulbon.gif" width="100" height="180"><p>Default z-index is 0. Z-index -1 has lower priority.</p><input type="button" onclick="changeStackOrder()"value="Change stack order" /></body></html>