文章發佈於Sevendesign,如需轉貼請保留本訊息,並註明原文連結
原文連結:http://sevendesign1230.pixnet.net/blog/post/2485381

浮動圖層(Floating Layer)的技術其實經常應用在許多較長的網頁文件中,藉以呈現能隨著瀏覽器的捲軸移動的浮動廣告或快速選單。 有許多的方法都能達到此效果,在此提供利用Css的方法來達到浮動圖層的效果,如需使用JavaScript達到浮動圖層效果請點此

<head>與</head>之間

<style type="text/css">
<!--
html {*overflow: hidden;}
body {
margin:0;
padding:0;
*overflow: auto;
height: 100%;
background-color: #FFCC66;
}
.fixed {
background:#000;
color:#fff;
margin:0px 0px 0px 0px;
right:0px!important;*right:0px!important; *right:17px;
width:300px;
height:200px;
z-index:1;
position: fixed!important;*position: fixed!important; *position: absolute;
}
-->
</style></head>

<body>與</body>之間

<div class=fixed>position: fixed</div>

※註:其實position的fixed屬性是很好用的,但是在IE6.0下卻無法正常顯示其效果,因此必須替IE6.0做些設定(紅色字眼為針對IE6.0所做的設定),讓IE6.0也能達到與IE7.0、FireFox相同的效果。

Seven 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 加盟創業
  • 來試試看~不知道試不試的出來~~謝謝大大的教學唷~

    受益良多~
  • 不會~有問題的話可以提出來唷^^

    Seven 於 2010/06/15 17:33 回覆

【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消