CSS定位综合实例

最新推荐文章于 2023-07-22 14:52:35 发布

BIN_GOO

最新推荐文章于 2023-07-22 14:52:35 发布

阅读量622

点赞数 1

分类专栏： html CSS 文章标签： web css 实例

本文链接：https://blog.csdn.net/BIN_GOO/article/details/52081883

版权

html CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS定位：position是盒子模型中一个重要的概念。Position有4个属性值：static（静态，无定位），relative（相对定位），absolute（绝对定位），fixed（固定定位）。

下面通过一个例子讲述4个属性值的区别：

1. CSS定位实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css的定位：position</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#wrap{
			width: 400px;
			height: 800px;
			margin-left: 20px;
			border: 10px inset #f0ff00;   /* 边框凹陷 */
			background-color: #eee;
		}
		#abs1,#abs2,#abs3,#abs4,#abs5 {    /* 绝对定位div */
			width: 120px;
			height: 50px;
			border: 5px double #000;
			position: absolute;
		}
		#abs1 {
			top: 10px;
			left: 10px;
			background-color: #9c9;
		}
		#abs2 {
			top: 20px;
			left: 50px;
			background-color: #9cc;
		}              /* div2在div1上面，因为div2比div1先定义 */
		#abs3 {
			bottom: 10px;
			left: 50px;
			background-color: #9cc;
		}
		#abs4 {
			top: 10px;
			right: 50px;
			z-index: 9;
			background-color: #9cc;
		}
		#abs5 {
			top: 20px;
			right: 90px;
			z-index: 10;    /* div5在div4上面，因为z-index的值比div4的大 */
			background-color: #9c9;
		}
		#fix {                     /* 固定定位div */

			width: 100px;
			height: 100px;
			border: 15px outset #f0ff00;    /* 边框凸起 */
			background-color: #9c9000;
			position: fixed;
			top: 100px;
			left: 160px;
		}
		#rel {         /* 相对定位div */
			width: 100px;
			height: 100px;
			border: 5px dashed #0ff;
			position: relative;
			top: 25px;
			left: 390px;
		}
		#a,#b,#c {        /* 无定位 */
			width: 300px;
			height: 100px;
			border: 1px solid #000;
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="abs1">第1个绝对定位的div容器</div>
		<div id="abs2">第2个绝对定位的div容器</div>
		<div id="abs3">第3个绝对定位的div容器</div>
		<div id="abs4">第4个绝对定位的div容器</div>
		<div id="abs5">第5个绝对定位的div容器</div>
		<div id="fix">固定定位的div容器</div>   <!-- 绝对定位和固定定位区别：固定定位的位置不会随滚动条而改变 -->
		<div id="a">第1个无定位的div容器</div>
		<div id="rel">相对定位的div容器</div>   <!-- 相对原来出现的位置，并没有脱离父容器all -->
		<div id="b">第2个无定位的div容器</div>
		<div id="c">第3个无定位的div容器</div>
	</div>
</body>
</html>