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

来源：互联网发布：linux kernel debug 编辑：程序博客网时间：2024/05/01 12:24

主题：使用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>