可以尝试用这样的代码:
z-index: auto;
position: fixed;
margin:.....以下就不用多说了吧!
不能,如果只是想在页面上固定一个东西的位置,可以用position来实现,但他们这个,本来就在一个位置,向下滚动超过这个位置才会开始固定,必须要用到JS,下面是我精简过的这个页面,你可以试试看下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.col1{width:620px;float:left;margin:23px 40px 20px 0; position:relative;}
.div1{}
.div2{position:fixed;_position:absolute;top:0;z-index:300;}
</style>
</head>
<body>
<div class="page">
<div class="col1">
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
</div>
<div>bb</div>
<div id="float" class="div1">
ddddddddddddd
</div>
<script type="text/javascript">
window.onload=
function(){
var oDiv=document.getElementById("float");
var H=0;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";}
else{oDiv.className="div1";}
};
}
</script>
</body>
</html>