CSS定位

最新推荐文章于 2024-10-02 15:35:50 发布

小Q圈圈

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量165

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_36457148/article/details/78172718

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

定位

利用地位，可以准确地定义元素框相对于其他正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

定位的类型

主要讲两个：

一个是absolute 一个是relative

relative：

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍然保留。

<!DOCTYPE html>
<html>
<head>
	<title>position</title>
	<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			background-color: blue;
			position: relative;
			float: left;
			left: 30px;
			top: 50px;
		}
		#box2{
			width: 100px;
			height: 100px;
			background-color: red;
			float:left;
		}
	</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>

蓝色是方框是相对原来位置进行偏移

原本占有的位置是存在的，所以红色是浮动不过去。

再看absolute：

元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素是不存在一样。元素定位后会产生一个块级框，而不论原来它在正常流中生成何类型的框。

<!DOCTYPE html>
<html>
<head>
	<title>position</title>
	<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			background-color: blue;
			position: absolute;
			float: left;
			left: 30px;
			top: 50px;
		}
		#box2{
			width: 100px;
			height: 100px;
			background-color: red;
			float:left;
		}
	</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>