CSS:position属性

最新推荐文章于 2025-05-22 16:54:57 发布

203最强

最新推荐文章于 2025-05-22 16:54:57 发布

阅读量267

点赞数

分类专栏： CSS页面布局及排版文章标签： css position relative absolute fixed

本文链接：https://blog.youkuaiyun.com/qq_36689512/article/details/53858120

版权

CSS页面布局及排版专栏收录该内容

4 篇文章

订阅专栏

盒子定位

在使用CSS进行网页布局时，可以利用元素position属性来指定元素的位置。相关属性如下：

①静态定位（static）

static:默认，没有任何移动效果。

②相对定位（relative）

生成相对定位的元素，相对于其正常位置进行定位。水平通过left或者right设置垂直通过top或者bottom。

③绝对定位（absolute）

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。水平通过left或者right设置垂直通过top或者bottom。

④固定定位（fixed）

类似于绝地定位，不过的他的基准不是祖元素，而是浏览器窗口。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>position属性</title>
	    <style type="text/css">
	    .father{background-color:#FF6600 ;border: 1px dashed #000000;}
	    .block1{position:static;}
	    .block2{position: relative;left: 15px; top: 20px;}	    	
	    .block3{position:absolute;left:100px;top:150px}
	    .block4{position: fixed;left:200px;top:200px;}
	    </style> 
	</head>
	<body>
		<div class="father">
			<div class="block1"><b>静态定位</b></div>
		    <div class="block2"><b>相对定位</b></div>
		    <div class="block3"><b>绝对定位</b></div>
            <div class="block4"><b>固定定位</b></div>		
		</div>
	</body>
</html>