Css中关于定位的理解，相对定位、绝对定位、浮动定位

最新推荐文章于 2022-11-17 20:58:06 发布

包子源

最新推荐文章于 2022-11-17 20:58:06 发布

阅读量2.3k

点赞数 2

本文链接：https://blog.csdn.net/ziwoods/article/details/49851461

版权

html 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

Css中的定位网页制作中扮演着举足轻重的角色，通过定位，可以轻松的使快元素放置在合适的位置。定位分为三种，绝对定位、相对定位、浮动定位。绝对定位会使同级元素重新从（0,0）坐标开始定位。相对定位会考虑同级元素产生的位置影响。浮动定位时，如果有滚动条，元素位置不受滚动条的影响。

有些情况下必须使用定位，使元素具备层级关系需要使用z-index时，首先必须定位。需要使元素出现在页面最底部，首先要添加浮动定位，使bottom值为0。

1：绝对定位：

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

相对定位：

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

浮动定位：(适合于制作顶部导航，顶部不会随着内容的滚动而滚动)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
		*{
			padding: 0;
			margin: 0;
		}
			.div{
				width:100%;
			height: 50px;
			background-color: #cccccc;
			position: fixed;
			line-height: 50px;
			}
			.div ul li{
				width: 20%;
			
				float: left;
				text-align: center;
				list-style-type: none;
			}
			.ff{
				width: 100%;
				height: 1500px;
				background-color: red;
				padding-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<ul>
				<li>标题</li>
				<li>标题</li>
				<li>标题</li>
				<li>标题</li>
				<li>标题</li>
			</ul>
		</div>
		<div class="ff">
			11111111111111111111111111111<p>1111111111111111111111111</p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
		</div>
	</body>
</html>