CSS簡單實現(xiàn)網(wǎng)頁懸浮效果（對聯(lián)廣告）
互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:24:26 作者：佚名 
我要評論
我要評論css固定定位，即懸浮效果（例如對聯(lián)廣告），不用js，css中"position:fixed;"即可。
position:fixed; 以視口為包含塊，因此在瀏覽器窗口內(nèi)固定。
ie 6.0不支持，因此采用相對于html元素的絕對定位。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transiti
css固定定位，即懸浮效果（例如對聯(lián)廣告），不用js，css中"position:fixed;"即可。
position:fixed; 以視口為包含塊，因此在瀏覽器窗口內(nèi)固定。
ie 6.0不支持，因此采用相對于html元素的絕對定位。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>CSS固定定位</title>
<styletype="text/css">...
*{...}{
padding:0;
margin:0;
}
#fixedLayer{...}{
width:100px;
line-height:50px;
background:#FC6;
border:1pxsolid#F90;
position:fixed;
left:10px;
top:10px;
}
</style>
<!--[iflteIE6]>
<styletype="text/css">
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
overflow:auto;
}
#fixedLayer{
position:absolute;
}
</style>
<![endif]-->
</head>
<body>
<divid="fixedLayer">固定不動</div>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
</body>
</html>
position:fixed; 以視口為包含塊，因此在瀏覽器窗口內(nèi)固定。
ie 6.0不支持，因此采用相對于html元素的絕對定位。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>CSS固定定位</title><styletype="text/css">...*{...}{padding:0;margin:0;}#fixedLayer{...}{width:100px;line-height:50px;background:#FC6;border:1pxsolid#F90;position:fixed;left:10px;top:10px;}</style><!--[iflteIE6]><styletype="text/css">html{height:100%;overflow:hidden;}body{height:100%;overflow:auto;}#fixedLayer{position:absolute;}</style><![endif]--></head><body><divid="fixedLayer">固定不動</div><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p><p>dd</p></body></html>
相關(guān)文章
這篇文章主要介紹了純CSS實現(xiàn)DIV懸浮的示例代碼(固定位置),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一2021-01-07
CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實現(xiàn)
這篇文章主要介紹了CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-17
這篇文章主要介紹了css實現(xiàn)懸浮客服效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-13
這篇文章主要介紹了css做個波浪懸浮球的實現(xiàn)方法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-14
平時我們在瀏覽網(wǎng)頁時，如下圖的導(dǎo)航欄已經(jīng)屢見不鮮了，當(dāng)鼠標(biāo)放上去時，右側(cè)隱藏的內(nèi)容就會慢慢平滑展開，非常美觀且實用，今天小編通過本文給大家分享基于CSS實現(xiàn)網(wǎng)頁懸2023-02-13
