CSS簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)懸浮效果（對(duì)聯(lián)廣告）
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:24:26 作者：佚名 
我要評(píng)論
我要評(píng)論css固定定位，即懸浮效果（例如對(duì)聯(lián)廣告），不用js，css中"position:fixed;"即可。
position:fixed; 以視口為包含塊，因此在瀏覽器窗口內(nèi)固定。
ie 6.0不支持，因此采用相對(duì)于html元素的絕對(duì)定位。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transiti
css固定定位，即懸浮效果（例如對(duì)聯(lián)廣告），不用js，css中"position:fixed;"即可。
position:fixed; 以視口為包含塊，因此在瀏覽器窗口內(nèi)固定。
ie 6.0不支持，因此采用相對(duì)于html元素的絕對(duì)定位。
<!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">固定不動(dòng)</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不支持，因此采用相對(duì)于html元素的絕對(duì)定位。
<!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">固定不動(dòng)</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實(shí)現(xiàn)DIV懸浮的示例代碼(固定位置)
這篇文章主要介紹了純CSS實(shí)現(xiàn)DIV懸浮的示例代碼(固定位置),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2021-01-07
CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實(shí)現(xiàn)
這篇文章主要介紹了CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-17
這篇文章主要介紹了css實(shí)現(xiàn)懸浮客服效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-13
css做個(gè)波浪懸浮球的實(shí)現(xiàn)方法
這篇文章主要介紹了css做個(gè)波浪懸浮球的實(shí)現(xiàn)方法的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-14
基于CSS實(shí)現(xiàn)網(wǎng)頁(yè)懸浮菜單效果
平時(shí)我們?cè)跒g覽網(wǎng)頁(yè)時(shí)，如下圖的導(dǎo)航欄已經(jīng)屢見(jiàn)不鮮了，當(dāng)鼠標(biāo)放上去時(shí)，右側(cè)隱藏的內(nèi)容就會(huì)慢慢平滑展開(kāi)，非常美觀(guān)且實(shí)用，今天小編通過(guò)本文給大家分享基于CSS實(shí)現(xiàn)網(wǎng)頁(yè)懸2023-02-13
