CSS_5th_定位position

最新推荐文章于 2024-08-07 22:13:00 发布

weqpo

最新推荐文章于 2024-08-07 22:13:00 发布

阅读量413

点赞数

分类专栏： CSS 文章标签： html css 定位 position

本文链接：https://blog.csdn.net/weqpo/article/details/63266578

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、position定位
1）position属性是指本体相对于上级的定位，position定位又分绝对定位(absolute)和相对定位(relative)。
2）它的默认值是static，意味着元素没有被定位，出现在文档流中应该出现的位置。
3）如果用position来布局页面，父级元素的position属性必须为relative或absolute。行元素加了position:absolute后可设置宽和高（加了float和fixed以后也可以设置宽和高）。
4）通常不会让元素相对于浏览器定位，元素都有各自的布局容器，要让元素基于它的父级来定位，这就要让元素知道那个是它绝对定位的父级，一般而言，加了position:relative;的会作为绝对定位元素的父级。

二、举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul li{ width: 300px; height: 210px; border: 1px solid #ddd; list-style: none; float: left; margin-left: 30px;
				position: relative;
				text-align: center;
			}
			div{ width: 100px; height: 100px;
				position: absolute;
				left: 100px;
				top: -50px;
			}
			.div1{ background: url(img/01.png) no-repeat center;}
			.div2{ background: url(img/02.png) no-repeat center;}
			.div3{ background: url(img/03.png) no-repeat center;}
		</style>
	</head>
	<body>	
		<br />
		<br />
		<br />
		<br />
		<ul>
			<li>
				<div class="div1"></div>
				<br /><br /><br />
				<p>极致加速</p>
			</li>
			<li>
				<div class="div2"></div>
				<br /><br /><br />
				<p>安全稳定</p>
			</li>
			<li>
				<div class="div3"></div>
				<br /><br /><br />
				<p>精细化报表</p>
			</li>			
		</ul>
		<div class="clear" ></div>
	</body>
</html>

总结：
①父级要加relative，让子级可以以它定位，子级要加absolute，说明它是绝对定位，
然后使用top、right、left、bottom来决定位置，取值可以为负数，即超出父级边界。

网页效果：