css控制固定在左下,右下,左上角的漂浮层

转载 2012年03月29日 14:13:07

主题:使用CSS控制一个固定在左下,右下,左上角的漂浮层

应用范围: 弹出右下角广告,固定滑动的右上角购物车功能等。

其他说明: 此 Demo 未作浏览器兼容性测试(20110906測試到,IE6不支持外,兼容在IE7,IE8,firefox,safari,opera,google chrome,360 browser)

源码:

 (修正後的代碼,可兼容IE6,以及解決IE6中頁面滾動時抖動問題,仿天涯底部固定漂浮导航,天涯是用纯CSS写法,實現固定層DEMO)

<!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>
    <title></title>
    <style type="text/css">
        body, button, input, select, textarea
        {
            font: 12px/1.5 tahoma,arial,宋体;
            /*
              background-attachment:fixed;background-image:url(text.txt); 一起用,解决固定层飘浮在窗口上,在IE6下抖动的问题。
              作用:如果body本身没有定义背景图片,添加这个背景图片属性,固定背景图层,使背景不受页面滚动而变化,解决IE6下抖动问题。
            */
            background-image:url(text.txt);/* for IE6 */
            background-attachment:fixed;/* for IE6 */
        }
        #tstart-toolbar-top
        {
            top:0;/*最上*/             
            color: #3E3E3E;
            right: 0;
            position: fixed;
            text-align: left;
            width: 100%;
            z-index: 10000;
            _position:absolute; /* for IE6 */
            _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */
            overflow:visible;
        }
        #tstart-toolbar-top .tstart-right
        {
            float: right;/*在右*/             
            margin: 5px 5px 5px 5px;
            padding: 10px;
            border: 1px solid silver;
            background-color:white;           
            box-shadow: 0px 0px 5px #000;
            -moz-box-shadow: 0px 0px 5px #000;
            -webkit-box-shadow: 0px 0px 5px #000;
        }
        #tstart-toolbar-bottom
        {
            position: fixed;/*固定*/
            bottom: 0;/*在最下*/
            color: #3E3E3E;
            left: 0;
            text-align: left;
            width: 100%;
            z-index: 10000;
            _position:absolute; /* for IE6 */
            _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */
            overflow:visible;
        }
        #tstart-toolbar-bottom .tstart-left
        {
            float: left;/*在左*/             
            width: 300px;
            margin: 5px 5px 5px 5px;
            padding: 5px;
            border: 1px solid silver;
            background-color:white;
            /*椭圆与阴影*/
            box-shadow: 0px 0px 5px #000;
            -moz-box-shadow: 0px 0px 5px #000;
            -webkit-box-shadow: 0px 0px 5px #000;
        }
        #tstart-toolbar-bottom .tstart-right
        {
            float: right; /*在右*/
            width: 300px;
            margin: 5px 5px 5px 5px;
            padding: 5px;
            border: 1px solid silver;
            background-color:white;
            
            box-shadow: 0px 0px 5px #000;
            -moz-box-shadow: 0px 0px 5px #000;
            -webkit-box-shadow: 0px 0px 5px #000;
        }
    </style>
</head>
<body>
    <div style="height: 2000px">
        div style="height:2000px"
    </div>
    <div id="tstart-toolbar-top">
        <div class="tstart-right">
            <img src="T237JfXbBcXXXXXXXX_!!26503949.gif" alt="营业时间" />
        </div>
        </div>
    <div id="tstart-toolbar-bottom">
        <div class="tstart-left">
            左下角-工具条
        </div>
        <div class="tstart-right">
            右下角-工具条
        </div>
    </div>
    </div>
</body>
</html>
 

CSS基础 不会随着滚动条变化的固定在右下角的div块

镇场诗:慈心积善融学习,技术誓为大家学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 ———————————————————————————————————————————————...
  • yushaopu
  • yushaopu
  • 2016年09月27日 09:01
  • 1394

bootstrap div 右对齐

div class="col-lg-5 pull-right">div>
  • AS_JOPO
  • AS_JOPO
  • 2015年08月11日 16:06
  • 27632

CSS基础 不会随着滚动条变化的固定在左上角的div块

慈心积善融学习,技术愿为有情学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 1、代码                      #div1{   ...
  • yushaopu
  • yushaopu
  • 2016年09月27日 09:03
  • 1775

在一个div上添加另外一个div:例如在一个div的左上角添加一个logo

首先是一个div,名称是mapdiv,mapdiv里有很多内容(地图),想在这个div左上角添加一个logo(年份),实现的方法是 1、首先将mapdiv设置为相对位置,即mapdiv.style....
  • qq_15167261
  • qq_15167261
  • 2015年07月21日 11:00
  • 1408

div+css顶部固定浮动

title content
  • isealand
  • isealand
  • 2013年07月01日 13:21
  • 3058

css3 斜角标签

.label{             display: block;             position:relative;             width: 50%;      ...
  • hannaqq
  • hannaqq
  • 2015年08月18日 10:43
  • 1496

Css控制层在中间以及右下角显示(附…

1.css #cao {  background-color: #3366FF;  height: 200px;  width: 200px;  position: fixed;  top:50%...
  • lovejesuslove
  • lovejesuslove
  • 2016年03月21日 10:47
  • 244

div层位于右侧并悬浮随窗口移动,相对固定

float:right; 层位于右侧 position:absolute; right:20px; top:20px; 这样是相对固定的。 z-index:100px; 层级...
  • wide288
  • wide288
  • 2014年07月28日 15:51
  • 12256

CSS让div层悬浮在最上方

效果如下: 这里是使得一张div里面的图片悬浮在了地图的上方,css代码如下 .tl { width: 240px; height: 193px; position: absolut...
  • zxj19951029
  • zxj19951029
  • 2015年06月24日 11:07
  • 16434

html+css+jquery实现右下角返回顶部功能

html+css+jquery实现返回顶部功能
  • qq_35017200
  • qq_35017200
  • 2017年04月16日 11:34
  • 294
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css控制固定在左下,右下,左上角的漂浮层
举报原因:
原因补充:

(最多只允许输入30个字)