css使用position 属性实现定位效果的方法

发布时间：2020-09-17 11:02:15 作者：小新
来源：亿速云阅读：223

小编给大家分享一下css使用position 属性实现定位效果的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

css中定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。下面开始介绍如何使用css position属性实现定位效果。

一：静态定位（static）

元素按照其在 HTML 中的位置顺序决定排布的过程，默认定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。本元素需要设置position为static。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>亿速云-position元素(静态定位)</title>
		<style>
			.box{
				width: 300px;
				overflow: hidden;
				padding: 10px;
				border: 1px solid #000;
				margin: 10px auto;
			}
			.static {
				position: static;
				border: 3px solid #007AFF;
			}

		</style>
	</head>

	<body>
		<div class="box">
			<h3>position: static;</h3>
			<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
			<div class="static">
				该元素使用了 position: static;
			</div>
		</div>
	</body>

</html>

下面是效果图：

css使用position 属性实现定位效果的方法

二：相对定位（relative）

相对定位被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动top,left,bottom,right都可以有值。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的页面空间，可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>亿速云-position元素(相对定位)</title>
		<style>
			.box{
				width: 300px;
				overflow: hidden;
				padding: 10px;
				border: 1px solid #000;
				margin: 10px auto;
			}
			
			
			
			.box1{
		        background-color: red;
		        width:100px;
		        height:100px;
		    }
		    .box2{
		        background-color: yellow;
		        width:100px;
		        height:100px;
		        position: relative;
		        left: 20px;
		    }
		    .box3{
		        background-color: blue;
		        width:100px;
		        height:100px;
		        position: relative;
		        right: 20px;
		    }

		</style>
	</head>

	<body>
		<div class="box">
                        <h3>position: relative;</h3>
			<div class="box1">正常位置的盒子</div>
			<div class="box2">相对于其正常位置向左移动的盒子</div>
			<div class="box3">相对于其正常位置向右移动的盒子</div>

		</div>
	</body>

</html>

下面是效果图：

css使用position 属性实现定位效果的方法

相对定位元素经常被用来作为绝对定位元素的容器块。

三：绝对定位（absolute）

将被赋予绝对定位的元素从它在普通流中的位置中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。

绝对定位的定位方法：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>亿速云-position元素(绝对定位)</title>
		<style>
			.box{
				width: 300px;
				overflow: hidden;
				padding: 10px;
				border: 1px solid #000;
				
			}
			.div1 {
			    width: 150px;
			    height: 150px;
			    background: yellow;
			}
			.div2 {
			    width: 150px;
			    height: 150px;
			    background: red;
			    top: 150px;
			    left: 100px;
			    position: absolute;
			}

		</style>
	</head>

	<body>
		<div class="box">
			<h3>position: absolute;</h3>
			<div class="div1">
			父元素
			    <div class="div2">子元素</div>
			</div>

		</div>
	</body>

</html>

下面是效果图：

css使用position 属性实现定位效果的方法

四、固定定位（fixed）

固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。本元素需要设置position为fixed。

以上是css使用position 属性实现定位效果的方法的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！

css使用position 属性实现定位效果的方法

相关阅读