position:fixed

1.它就是和absolute一样的，脱离文档流了，只不过它是以浏览器窗口为基准。

2.注意下面有元素会占据它本身的位置。用margin移动下面元素位置的时候，记得用fixed元素用上top：0px；把位置固定住。

3.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:none;
}
</style>
</head>
<body>
    <div style='width:100%;height:1000px;'>
        <div style='width:100%;height:50px;position:fixed;background:green;top:0px;'>头条</div>
        <div style='width:100%;height:100px;background:red;margin-top:50px;'>红色</div>
        <div style='width:100%;height:100px;background:yellow;'>黄色</div>
    </div>
</body>
</html>

 

posted @ 2017-05-25 17:59  Horsen  阅读(241)  评论(0)  编辑  收藏  举报