CSS — 定位-CSDN博客

本文链接：https://blog.csdn.net/chuangshangbeidong/article/details/123918239

CSS — 定位

1. 定位

1. 定位

1.1 为什么需要定位

定位可以让盒子自由的在某个盒子内移动
定位可以让盒子固定在屏幕中的某个位置（无论屏幕是否缩放）
定位可以压住其他盒子

1.2 定位的组成

定位 = 定位模式 + 边偏移

1.2.1 定位模式

static：静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

1.2.2 边偏移

这四个属性是定位特有的，如果是标准流或者浮动不能使用这四个属性

top：顶部偏移量
bottom：底部偏移量
left：左侧便宜量
right：右侧便宜量

1.3 定位分类

1.3.1 static 静态定位

静态定位是元素的默认定位方式，其实也就是无定位。

语法：

选择器 {position: static;}

1.3.2 relative 相对定位

相对定位是元素在移动的时候，是相对于它原来的位置来说的。

语法：

选择器 {position: relative;}

特点：

移动时的参照点是自己原来的位置；
原来的位置继续占用，后面的盒子仍然以标准流的方式对待它。不脱标，所以相对定位的主要作用是给绝对定位当爹的。

1.3.3 absolute 绝对定位

决定定位在元素移动的时候，是相对于它的父（祖先）元素来说的。

语法：

选择器 {position: absolute;}

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器（Document文档）为准来进行定位；
如果祖先元素有定位（相对、绝对、固定定位都可以），则以最近一级的有定位的祖先元素为参考点移动位置。
绝对定位的元素不再保留原来的位置。脱标

1.3.4 子绝父相

意思：子级是绝对定位的话，父级要用相对定位。

子级绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响其他的兄弟盒子；
父盒子需要加定位限制子盒子在父盒子内展示；
父盒子布局时，需要占用位置，因此父亲只能是相对定位。

1.3.5 fixed 固定定位

固定定位是元素固定于浏览器的可视区的位置。主要是用场景：可以在浏览器滚动时保证元素的位置不会改变。

语法：

选择器 {position: fixed;}

特点：

以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。
不占有原来的位置。脱标

1.3.6 stick 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器 {position: sticky; top: 10px;}

特点：

以浏览器的可视窗口为参照点移动元素（固定定位的特点）
粘性定位占有原来的位置（相对定位的特点）
必须添加 top left right bottom 其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE不支持。

1.3.7 定位总结

在这里插入图片描述

1.4 定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序（z 轴）

语法：

{z-index : 1;}

数值可以是正整数、负整数、0，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

1.5 常用定位小技巧

1.5.1 固定在版心右侧位置

让固定定位的盒子 left:50%，走到浏览器可视区（也可以看作版心）的一半的位置；
让固定定位的盒子的 margin-left 设置为版本宽度一半的距离，多走版心宽度一般的位置。

.fixed {
    position: fixed;
    /* 1. 走浏览器宽度的一半 */
    left: 50%;
    /* 2. 利用margin 走版心盒子宽度的一半距离 */
    margin-left: 405px;
    width: 50px;
    height: 150px;
    background-color: skyblue;
}

1.5.2 绝对定位的盒子居中

以水平居中为例：

left 走 50% 父亲容器宽度的一半；
margin负值（往左边走）自己盒子宽度的一半

.box {
    position: absolute;
    /* 1. left 走 50%  父容器宽度的一半 */
    left: 50%;
    /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    width: 200px;
    height: 200px;
    background-color: pink;
    /* margin: auto; */
}