如何把DIV固定在浏览器中的某个位置，
用DIV定位时，希望看到的效果是不随着滚动条变化而改变位置，请问，不用javascript能做到这个效果么？如果可以，请留下代码，如果不行，请留下思路谢谢咯：）...
用DIV定位时， 希望看到的效果是不随着滚动条变化而改变位置，
请问，不用javascript 能做到这个效果么？
如果可以，请留下代码，如果不行，请留下思路 谢谢咯 ：） 展开
请问，不用javascript 能做到这个效果么？
如果可以，请留下代码，如果不行，请留下思路 谢谢咯 ：） 展开
2个回答
展开全部
你要的是固定定位效果吧,不用javascript就可以做到;下面这个例子效果是水平垂直居中页面,并且不随着滚动条变化而改变位置; position:fixed固定定位但IE6不兼容所以用了个hack;你看看下面的例子就明白了;
<!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>
<style type="text/css">
body{ margin:0; padding:0}
.fixed{position:fixed;bottom:0; width:300px; height:300px; left:50%;top:50%; background:#FF0000; margin-left:-150px/*为.fixed宽的一半*/; margin-top:-150px/*为.fixed高的一半*/; background:#006633}
</style>
<!--以下是为了兼容IE6的hack-->
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
.fixed{position:absolute;}
</style>
<![endif]-->
</head>
<body>
<div class="fixed">{position:fixed}</div>
</body>
</html>
<!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>
<style type="text/css">
body{ margin:0; padding:0}
.fixed{position:fixed;bottom:0; width:300px; height:300px; left:50%;top:50%; background:#FF0000; margin-left:-150px/*为.fixed宽的一半*/; margin-top:-150px/*为.fixed高的一半*/; background:#006633}
</style>
<!--以下是为了兼容IE6的hack-->
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
.fixed{position:absolute;}
</style>
<![endif]-->
</head>
<body>
<div class="fixed">{position:fixed}</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<</SPAN>html>
<</SPAN>head>
<</SPAN>title></</SPAN>title>
<</SPAN>style type="text/css">
html,body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
}
.virtual_body {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:auto;
}
.fixed_div {
position:absolute;
z-index:2008;
bottom:20px;
left:40px;
width:800px;
height:40px;
border:1px solid red;
background:#e5e5e5;
}
</</SPAN>style>
</</SPAN>head>
<</SPAN>body>
<</SPAN>div class="fixed_div">I am still here!</</SPAN>div>
<</SPAN>div class="virtual_body">
<</SPAN>div style="height:888px;">
I am content !
</</SPAN>div>
</</SPAN>div>
</</SPAN>body>
</</SPAN>html>
<</SPAN>head>
<</SPAN>title></</SPAN>title>
<</SPAN>style type="text/css">
html,body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
}
.virtual_body {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:auto;
}
.fixed_div {
position:absolute;
z-index:2008;
bottom:20px;
left:40px;
width:800px;
height:40px;
border:1px solid red;
background:#e5e5e5;
}
</</SPAN>style>
</</SPAN>head>
<</SPAN>body>
<</SPAN>div class="fixed_div">I am still here!</</SPAN>div>
<</SPAN>div class="virtual_body">
<</SPAN>div style="height:888px;">
I am content !
</</SPAN>div>
</</SPAN>div>
</</SPAN>body>
</</SPAN>html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
