css固定定位，即悬浮效果

最新推荐文章于 2024-07-09 09:39:15 发布

原创最新推荐文章于 2024-07-09 09:39:15 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #xhtml #border #浏览器 #ie

本文介绍如何使用CSS实现固定定位效果，即元素相对于浏览器窗口固定显示。通过设置position属性为fixed，可以使元素保持在指定位置不变，即使页面滚动也不受影响。为兼容IE6等旧版浏览器，文中还提供了替代方案。

css固定定位，即悬浮效果（例如对联广告），不用js，css中"position:fixed;"即可。
position:fixed; 以视口为包含块，因此在浏览器窗口内固定。
ie 6.0不支持，因此采用相对于html元素的绝对定位。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS固定定位</title>
<style type="text/css">...
* {...}{
padding:0;
margin:0;
}
#fixedLayer {...}{
width:100px;
line-height:50px;
background: #FC6;
border:1px solid #F90;
position:fixed;
left:10px;
top:10px;
}
</style>

</head>