395day(定位复习，子绝父相)_父相子绝怎么用-优快云博客

本文链接：https://blog.youkuaiyun.com/orangecloudy/article/details/83663702

本文深入探讨了CSS中静态、绝对、相对和固定定位的特点及应用，通过实例代码展示了如何使用定位属性来创建复杂的网页布局。文章重点介绍了元素的定位方式及其在页面布局中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《2018年11月3日》【连续395天】

标题：定位复习，子绝父相；

内容：

/*postion: static/
		absolute/ 不占位置  移当前屏为基准
		relative(以自己的左上角点为基点移动)/  原本的占位置
		fixed*/

		/*当父没有定位，以最近的已定位的祖先为基准，直到window*/

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;
	}
	
	li {
		list-style: none;
	}
	
	.sf {
		width: 1250px;
		height: 472px;
		margin: 100px auto;
		position: relative;
	}

	.nav {
		width: 960px;
		height: 80px;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -480px;
		background-color: #000;
	}
	
	.nav li {
		float: left;
		width: 160px;
		height: 80px;
	}

	.nav li a {
		width: 160px;
		height: 80px;
		display: block;
		text-align: center;
		line-height: 80px;
		color: #fff;
		text-decoration: none;
	}

	.nav li a:hover {
		background-color: #fff;
		color: #000;
	}
	</style>
</head>
<body>
	<div class="sf">
		<a href="#">
			<img src="images/sf.png" height="472" width="1259" alt="">
		</a>
		<div class="nav">
			<ul>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
			</ul>
		</div>
	</div>
</body>