固定浮动定位(fixed)实现思路及代码

当前位置 : 首页 > 网页制作 > CSS > 固定浮动定位(fixed)实现思路及代码

固定浮动定位(fixed)实现思路及代码

来源: 作者: 时间:2015-11-06 13:12
需要在页面底部中间固定一个块,大家肯定会想到用positon:fixed来控制同时问题也出现了bottom:0px;能让其在底部,但是在中间怎么处理呢,接下来为大家带来详细的解决方案,感兴趣的你
需要在页面底部中间固定一个块,大家肯定会想到用positon:fixed来控制同时问题也出现了bottom:0px;能让其在底部,但是在中间怎么处理呢,接下来为大家带来详细的解决方案,感兴趣的你可不要错过了哈
网页中如下图,需要在页面底部中间固定一个块,当然用positon:fixed来控制,然后bottom:0px;能让其在底部,但是在中间怎么处理呢?

最先想到的是用js或者jquery算屏幕的宽度A,然后减去红色框的宽度B,那么它的left值为(A-B)/2 px;
其实有更简单的,只需要css来控制,代码如下

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.test
{
border:1px solid red;
position:fixed;
bottom:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto auto;
height:50px;
width:200px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>

重要之处就是left:0px;right:0px;margin:auto auto;
经测试在ie8、9、10,chrom、firefox中均正常
Tag:
上一篇:[css3]
下一篇:[CSS教程]
网友评论

<