定位
一定是块盒
定位：手动控制元素在包含块中的准确位置
CSS属性：position
当左右定位冲突，以左边为准
当上下定位冲突，以上边为准
position属性
- 默认值：static。静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
- sticky：类固定定位
一个元素，只要position的值不是static，认定该元素是一个定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
clip属性
只有在绝对定位(position：absolute;),才可以使用该属性
作用对元素内容进行剪切
属性：
auto——对象无剪切
rect——依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。单位像素（px）
上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0；
右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即 右-下 方位的auto值为盒子的实际宽度和高度；
inset——（新属性，可能许多浏览器不支持）该剪裁方式与 rect() 类似，不同的是 inset() 的剪裁，每个方位都是参照该方位的边界来进行裁剪的。
上-右-下-左 方位的裁剪：从0开始剪裁直到设定值，即 上-右-下-左 方位的auto值都等同于0；（CSS3）
相对定位（relative）
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移
主要为绝对定位提供活动区间
可以通过4个CSS属性设置
top: ;
right: ;
bottom: ;
left: ;
盒子偏移不会影响其他盒子造成任何影响
绝对定位（absolute）
- 宽高auto，自动适应
- 包含块变化：找祖先元素中第一个定位元素
top: ;
right: ;
bottom: ;
left: ;
活动范围为第一个定位元素的包含块
若找不到，活动范围为整个网页
固定定位（fixed）
其他情况与绝对定位完全一样
包含块不同：固定为视口（浏览器的可视窗口：可以看到的区域）固定在页面上，调整网页，不会改变位置
类固定定位（sticky）
可以达到固定定位的感觉，当滚动鼠标滑轮时，设置有该元素的标签到达top，right，left，bottom时，如果设置了像素，就会固定在屏幕的位置上，如果没有设置，就是没什么效果，跟relative
注意：当设置的标签不在屏幕，且还设置了对应的top，right，left，bottom，就会看到这块显示在屏幕上，当滚动滑轮到对应的区域，才会回到原位置
看代码运行一下，就知道了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 50%;
height: 50px;
margin: 50px 10px 0 ;
background-color: #666;
}
.this{
position: sticky;
top: 50px;
bottom:50px;
background: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="this"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
定位下的居中
某个方向居中
- 定宽（高）
- 将上右下左距离设置为了零
- 将上右下左 margin设施为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余的空间
相对定位可以不设置上右下左为零，只需要将margin设置为零，就可以使棋局中
多个定位元素重叠
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户（即显示在最上层）
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，遇到常规流，浮动元素，则会被其覆盖
补充
- 绝对定位，固定定位元素一定是块盒
- 绝对定位，固定定位元素一定不是浮动元素
- 没有外边距合并
网友评论