定位_Sander_2020的博客-CSDN博客-CSDN博客

本文详细介绍了CSS中的定位机制，包括position属性的各种值如static、relative、absolute、fixed和sticky的使用方法，以及它们如何影响元素的位置和布局。同时，还探讨了绝对定位与相对定位的区别，并解释了包含块的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS文档流

CSS 有三种基本的定位机制：普通流、浮动流、定位流。

POSTION

position定位属性，检索或设置对象的定位方式

position属性值

static	默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static元素会忽略任何 top、bottom、left或 right 声明）
absolute	相对于父级元素、的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定“left”、“top”、“right” 以及 “bottom”属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)
relative	是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流，占据空间】）
fixed	相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
sticky	可以看出是`position:relative`和`position:fixed`的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

补充：static 可用于取消定位
absolute: 若父级都没有定位则以可视区域定位

如果元素不设置宽度，添加position:absolute; 造成宽度被内容撑开。
添加position:absolute;浮动不起作用
添加position:absolute;margin的auto值不起作用

sticky 做吸顶效果
	position:sticky;
	top:0;

做定位时用的calc（）函数  四则运算函数  实现不同单位之间的运算
总结calc（）的使用：	
	1，必须加上单位
	2，必须再运算符左右用空格隔开
	
	top：calc(50% - 150px);

在这里插入图片描述

二、绝对定位和相对定位的区别

1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

包含块

包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；

默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

定位元素层次关系

z-index : auto |number

检索或设置对象的层叠顺序。
auto：默认值。
number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；

元素在浏览器窗口居中的方法

让一个元素始终在窗口水平、垂直位置居中：
1、div{
	width:200px;
	height:200px;
	background:#f00;
	position:fixed;
	left:0;right:0;top:0;bottom:0;
	margin:auto;
}
2、
div{
	width:200px;
	height:200px;
	background:#f00;
	position:fixed;
	left:50%;
	top:50%;
	margin:-100px 0 0 -100px;
}

锚点

命名锚点链接的应用：

命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1)给元素定义命名锚记名
语法：<标记   id="命名锚记名">    </标记>

2)命名锚记连接
语法：<a href="#命名锚记名称"></a>

1)给元素定义命名锚记名
语法：<标记 id=“命名锚记名”> </标记>

2)命名锚记连接
语法： < a href="#命名锚记名称">