This is common on many websites, such as Meilishuo, and this blog. It is very simple to achieve the effect of floating divs with css. The rendering is as shown on this site. The css code to achieve is as follows:
<!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=gb2312" />
<title>CSS固定定位</title>
<style type="text/css">
{
padding:0;
margin:0;
}
div{
width:100%;
line-height:30px;
background: red;
border:1px solid #F90;
position:fixed;
top:0px;
left:0px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
div{
position:absolute;
}
</style>
<![endif]-->
</head>
<body>
<div id="fixedLayer">固定不动</div>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
<p>php教程</p>
</body>
</html>should be considered Just go to the IE6 incompatibility issue!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
