CSS实现的div悬浮框并且兼容IE6的样式
发布时间：2013-12-09 17:27:28 作者：佚名 
我要评论
我要评论div悬浮框在某些特殊场合还是比较实用的，下面为大家介绍下使用CSS实现的并且兼容IE6，示例如下，感兴趣的朋友可以练练手
复制代码
代码如下:<!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;
right:10px;
bottom:10px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
#fixedLayer {
position:absolute;
}
</style>
<![endif]-->
</head>
<body>
<div id="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>
相关文章
- 昨天写样式遇到个问题，如何让鼠标悬浮DIV后，显示DIV外的按钮，可以点击到按钮。下面通过本文给大家分享CSS鼠标悬浮DIV后显示DIV外的按钮解决方法，感兴趣的朋友一起看看2017-08-26
- 右侧浮动效果，最早有QQ联系面板，对联广告等，大多数都是基于Javascript实现的动态效果，今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果2014-09-10
- DIV没有悬浮一说，更准确的应为层叠或者固定，下面为大家介绍的是通过CSS定位属性来实现这一效果2014-05-18
这篇文章主要介绍了纯CSS实现DIV悬浮的示例代码(固定位置),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2021-01-07
最新评论