12 - 定位

最新推荐文章于 2023-08-19 11:07:46 发布

xyyojl

最新推荐文章于 2023-08-19 11:07:46 发布

阅读量228

点赞数

分类专栏：前端 html+css 文章标签： position z-index 固定定位相对定位绝对定位

本文链接：https://blog.youkuaiyun.com/xyyojl/article/details/82660662

版权

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

html+css

21 篇文章

订阅专栏

定位

定位是什么?
定位的特性
定位的类型
相对定位与绝对定位的区别
固定定位
z-index
绝对定位元素居中的方式

###定位是什么

定位可以准确控制元素的位置状态,定位允许你从正常的文档流布局中取出元素,并使她们具有不同的行为,比如放在另一个元素的上面

参照物与坐标

参照物:你在哪我就在哪,我就远远的望着你,不离不弃

坐标方向:

left: 左到右为正/top: 上到下为正

right: 右到左为正/bottom:下到上为正

通过下图就可理解,不用死记硬背

往里面的都是为正的

![坐标](F:\Study course 1\img\坐标.png)

定位position: static

指定该元素正常的布局行为,元素在文档流当前的位置布局,定位的默认值,其实也就是没有定位,不支持top/right/left/bottom/z-index

定位position: fixed

含义:脱离文档流,部位元素预留空间,指定元素相对于屏幕窗口(viewport)来确定元素的位置,元素的位置在屏幕滚动时不会改变。
在不设置位置属性时默认在本身为脱离文档流的位置,但是不占位。
当设置方向属性(top/right/bottom/left)时,参照浏览器可视窗口左上角定位。

相对定位position: relative

相对于他本身正常位置发生偏移,但是元素还是保留未定位前的形状,原本所占据的空间还保留
关键词:left/top/right/bottom来改变位置,单位(px/em/百分比)
特点:
- 元素没有脱离文档流
- 不影响元素本身原来的特性
- 如果没有设置偏移量,对元素本身没有任何影响,还是在原来的位置

绝对定位position: absolute

相对于已经定位的元素的最近的祖先元素定位
- 定位类型包括:fixed,relative,absolute
- 元素没有祖先元素参考,则相对于body(浏览器窗口可视区域)
关键词:left/top/right/bottom,单位(px/em/百分比)
特点
- 完全脱离文档流(文字也感受不到)
- 块级化(完全变成block元素)
- 由里面的元素撑开宽高(不是宽度100%,包裹性)
- 需要根据参考物(相对于定位的元素)(父相子绝)
- 参照有定位属性的最近的祖先元素定位
- margin: auto;失效

层级关系z-index

z-index:可以调换两个元素的上下位置关系
默认是auto,值可正可负,越大越在上面,只能用于同级元素对比。
只对relative/absolute/fixed有效,其余定位的元素无效

###绝对定位元素居中的方式

关键词都为0,margin: auto;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小demo - 绝对定位元素居中</title>
	<style>
		body{
			margin: 0;
		}
		.box{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			width: 300px;
			height: 150px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

百分数居中减去定位元素宽高一半

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小demo - 绝对定位元素居中</title>
	<style>
		body{
			margin: 0;
		}
		.box{
			position: absolute;
			top: 50%;
			left: 50%;
            margin-left: -150px;
            margin-top: -75px;
            /*margin-top: -(盒子高度一半)px;
			margin-left: -(盒子宽度一半)px;*/
			width: 300px;
			height: 150px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>