鴨師傅網路教室─絕對位置的動態樣式

絕對位置的動態樣式

樣式屬性	屬性值	說明
position	absolute/relative/static	設定物件的定位方式為絕對、相對或靜態
left	pt/px/百分比/auto	設定左邊界的距離，可使用點數、像素、百分比或自動
top	pt/px/百分比/auto	設定上方邊界的距離，可使用點數、像素、百分比或自動
width	pt/px/百分比/auto	設定顯示的寬度，可使用點數、像素、百分比或自動
height	pt/px/百分比/auto	設定顯示的高度，可使用點數、像素、百分比或自動
z-index	整數/auto	設定重疊物件的排序編號
visibility	visible/hidden	設定顯示或隱藏物件

〔例1〕

<html>
<head>
<title>物件的顯示與隱藏</title>
<style type="text/css">
#pix {
   position: relative;
   top: -20pt;
   left: 10pt;
   visibility: hidden;
   z-index: 1
}
.Apple {
   color: #00ff00;
   background-color: black;
   font-size: 16pt;
   cursor: hand
}
.banana {
   color: #ff0000;
   background-color: gold;
   font-size: 16pt;
   cursor: hand
}
</style>
</head>
<body>
<span class=banana onmouseOver="this.className='Apple'; pix.style.visibility='visible'; this.innerText='滑鼠離開隱藏物件'"; onmouseOut="this.className='banana'; pix.style.visibility='hidden'; this.innerText='滑鼠過來顯示物件'">滑鼠過來顯示物件</span>
<img src='../8.jpg' id=pix align=absmiddle>
</body>
</html>

滑鼠過來顯示物件