CSS3网页定位技术(3)——fixed浮动定位

三:

Position还有第三个值:fixed

Fixed和absolute差不多,有一点小的不同。

你会发现一些广告的页面,无论你怎样滚动滑轮,广告是不东的。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				height: 200px;
				width: 50px;
				background-color: red;
				color: #fff;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div>前端前端前端前端前端前端前端前端前端</div>
		<br>*500
	</body>
</html>

现在又一个要求就是让红色的方块不东,无论我怎么滚动鼠标。

div{

              height: 200px;

              width: 50px;

              background-color: red;

              color: #fff;

              position: fixed;

              left: 0;

              top: 100px;

           }

这样就可以了!!

还有一个就是无论你的屏幕多大,他的广告都是居中不东的。

div{

              height: 100px;

              width: 100px;

              background-color: red;

              color: #fff;

              position: fixed;

              left: 50%;

              top: 50%;

           }

现在是小方块的左顶点在文档的50%,50%,怎么挪半个身位呢?

div{

              height: 100px;

              width: 100px;

              background-color: red;

              color: #fff;

              position: fixed;

              left: 50%;

              top: 50%;

              margin-left: -50px;

              margin-top: -50px;

           }

这样就可以了!

猜你喜欢

转载自blog.csdn.net/hdq1745/article/details/84102717
今日推荐