文章發佈於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相同的效果。

arrow
arrow
    全站熱搜

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

    E-mail轉寄