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

ttx9n · 发表于 2013-3-20 14:37:36

需要在页面底部中间固定一个块，大家肯定会想到用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中均正常

z80vh · 发表于 2022-8-8 16:59:29

的沙发水电费水电费

ppwxcg · 发表于 2022-9-7 00:15:17

很不错的样子

4r8oiin60 · 发表于 2022-10-5 22:07:40

源码源码源码源码源码源码源码源码源码源码源码源码源码

w18pvaep · 发表于 2023-1-6 05:50:35

还可以不错

nwk53kbd · 发表于 2023-5-19 12:43:35

天天源码社区论坛

回复用户1 · 发表于 2023-11-10 15:25:46

这个源码不错啊

5cf304mn2 · 发表于 2023-11-11 05:09:20

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

j__j33p · 发表于 2024-3-31 15:09:23

hi哦回复iOS就看见

e5plu · 发表于 2024-4-29 00:48:31

我要金豆金豆金豆

账号		自动登录	找回密码
密码			立即注册

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

相关帖子