CSS简易完成网页页面飘浮实际效果(对联广告宣

2021-01-20 17:31 jianzhan
css固定不动精准定位,即飘浮实际效果(比如对联广告宣传),无需js,css中"position:fixed;"便可。
position:fixed; 以视口为包括块,因而在访问器对话框内固定不动。
ie 6.0不适用,因而选用相对html元素的肯定精准定位。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>CSS固定不动精准定位</title>
<styletype="text/css">
*
{
padding
:0;
margin
:0;
}

#fixedLayer
{
width
:100px;
line-height
:50px;
background
:#FC6;
border
:1pxsolid#F90;
position
:fixed;
left
:10px;
top
:10px;
}

</style>
<!--[iflteIE6]>
<styletype="text/css">
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
overflow:auto;
}
#fixedLayer{
position:absolute;
}
</style>
<![endif]
-->
</head>

<body>
<divid="fixedLayer">固定不动没动</div>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
</body>
</html>