css篇 -- （三）定位 position

最新推荐文章于 2024-08-04 20:38:28 发布

江南花火

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量182

点赞数

文章标签： css 定位四种定位方式

本文链接：https://blog.csdn.net/weixin_43074423/article/details/86658474

版权

考虑了一下，还是写一点关于定位的东西，在网上查了一些资料，基本做如下解释：

1、首先介绍一下position这个属性；

基本的position的默认值有四个：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）；

定位的属性作用于当前元素，也就是说你设置哪个元素的属性就作用于哪个元素之上；

2、第一个介绍静态定位 static 吧，比较简单；

static 为 position 的默认值，当元素未定义 position 或定义 position 值为 static 时，该元素内定义的 top, bottom, left, right 和 z-index 无效。也是就是，符合文档流的规则；

3、之后要说相对定位 relative 和绝对定位 absolute；

（1）相对定位 relative：

相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留；其参照对象是离该元素最近的父元素。
（悄悄说：盗了有位老哥的图和代码）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
.rel{
	width: 200px;
	height:200px;
	background: red;
	position: relative;
	top:200px;
	left: 200px;
}
</style>
</head>
<body>
	<div class="rel">相对定位</div>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
 
</body>
</html>

在这里插入图片描述
原本红色的方块应该在左上角（0， 0）的位置，相对于父元素浏览器对象定位后该元素的坐标为（200， 200），此时下方的元素并没有占据该元素的原始位置，也就是说该元素仍旧在文档流中，位置依然会被保存；

（2）绝对定位 absolute：

absolute表示绝对位置，其在文档流中不占空间，其参考对象是离该元素最近的position值不是static的父元素，换句话说，就是离该元素最近的定位元素为参照对象，如果该元素的父元素、祖先元素没有可以提供定位的，那么定位会参照 html 对象，再次强调，绝对定位会脱离文档流；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	
	.abs{
		width: 200px;
		height:200px;
		background: red;
		position: absolute;
		top: 200px;
		left: 200px;
	}
 
</style>
</head>
<body>
		<div class="abs">绝对定位</div>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
		阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>	
</body>
</html>

在这里插入图片描述
原本红色的方块应该在左上角（0， 0）的位置，相对于父元素浏览器对象定位后该元素的坐标为（200， 200），此时后继的元素会占据该元素未定位前在文档流中的位置，也就是说该元素脱离了文档流，位置不会被保存，这里有点像之前一章中的浮动产生的效果，因为该元素满足了形成bfc的条件，所以脱离了文档流；

4、fixed定位

fixed表示固定定位，类似于absolute，但是其是根据浏览器窗口定位的，也就是说，absolute可能根据浏览器窗口对象定位，但定位的参照对象可以自由选择，而fixed直接参照浏览器窗口对象。使用fixed值的元素脱离文档流，此处与绝对定位相同。

关于定位position，有一个关联的z-index层次分级属性，有时间我会把这部分的知识补充到这节；欢迎持续关注

江南花火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css篇 -- （三）定位 position

考虑了一下，还是写一点关于定位的东西，在网上查了一些资料，基本做如下解释：1、首先介绍一下position这个属性；基本的position的默认值有四个：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）；定位的属性作用于当前元素，也就是说你设置哪个元素的属性就作用于哪个元素之上；2、第一个介绍静态定位 static 吧，比较简单；...
复制链接

扫一扫