#UI+前端#（五）定位

三种定位介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			div{
				width: 1000px;
				height: 500px;
				margin: auto;
			}
			li{
				width: 100px;
				height: 100px;
				background-color: #000;
				/*第一种方法：绝对定位
				position: absolute;
				left: 300px;
				top: 300px;
				相对于已定位的定位，如果没有已定位的，就对于body定位
				脱离普通文档流，后面图块会上去
				*/
				/*第二种方法，是不跟随页面滚动的
				position: fixed;小广告条一般都是这个
				left: 0;
				top: 0;
				脱离普通文档流，后面图块会上去
				*/
				/*第三种方法：相对定位
				position: relative;相对于原来的位置进行位移
				left: 100px;
				top: 100px;
				虽然脱离，但会保留原来的空间，后面的元素不会挤占这个空间，不影响整体
				*/
				position: absolute;
				left: 100px;
				top: 100px;
			}
			ul{
				width: 200px;
				height: 200px;
				background-color: #999;
			}
			.green{
				position: relative;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div style="background-color: red;"></div>
		<div class="green" style="background-color: green";>
			<li></li>
			<ul></ul>
		</div>
		<div style="background-color: blue;"></div>
		<div style="background-color: pink;"></div>
	</body>
</html>

relative和absolute一般会配合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.container{
				width: 81px;
				height: 143px;
				border: 1px solid #f00;
				position: relative;
			}
			.container>p{
				background-color: rgba(0,0,0,0.7);
				color: #fff;
				margin: 0;
				text-align: center;
				line-height: 40px;
				/*父级是relative，子级是absolute*/
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="img/1.jpg">
			<p>xxxxxxx</p>
		</div>
	</body>
</html>

特别强调
- fixed定位——屏幕定位
- absolute和relative配合使用
- absolute：在文档中的描述有一句：相对于已定位的父级，如果没有已定位的父级直接定位到body
- relative：相对于自身的相对位置，而且原先的位置不会被挤占

vircorns

发布了145 篇原创文章 · 获赞 8 · 访问量 1万+

私信关注

#UI+前端#（五）定位

猜你喜欢