返回
多御红包活动

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

发布时间:2022-11-29 03:35:23 42
# css# html# safari# webkit# 工具

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

兼容在IE7,IE8,firefox,safari,opera,google chrome,360 browser

<!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; width: 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>
</body>
</html>

 

 

 

 

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线