css定位

真的想不出名儿

已于 2023-06-03 22:09:09 修改

阅读量34

点赞数

分类专栏： css 文章标签： css html css3

于 2023-06-03 21:35:30 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/131025661

版权

css 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

5.2 相对定位 relative （重要）

5.3 绝对定位 absolute （重要）

1. 为什么需要定位

提问：以下情况使用标准流或者浮动能实现吗？

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

2. 定位组成

定位：将盒子定在某一个位置上，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式。

边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式，它通过CSS的 position 属性来设置，其值可以分为四个：

3. 定位模式

定位模式决定元素的定位方式，它通过CSS的 position 属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

4. 边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left 和 right 4个属性。

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线**的距离。
bottom	底部偏移量，定义元素相对于其父元素下边线的距离。
left	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	右侧偏移量，定义元素相对于其父元素右边线的距离。

5. 定位类型

5.1 静态定位 static （了解）

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 {
    position: static;
}

静态定位按照标准流特性摆放位置，没有边偏移
静态定位在布局时很少用到

5.2 相对定位 relative （重要）

相对定位是元素在移动位置时，是相对于它原来位置来说的（自恋型）。

语法：

选择器 {
    position: relative;
}

相对定位的特点：（务必记住）

参照：自己原来的位置
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

5.3 绝对定位 absolute （重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：

选择器 {
    position: absolute;
}

绝对定位的特点：（务必记住）

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

问题：

绝对定位和相对定位到底有什么使用场景呢？
为什么说相对定位给绝对定位当爹呢？

5.4 子绝父相的由来

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

意思：子级使用绝对定位，父级则需要相对定位。

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

② 父盒子需要加定位限制子盒子在父盒子内显示。

③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

5.5 固定位置 fixed （重要）

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

语法：

选择器 {
    position: fixed;
}

固定定位的特点：（务必记住）

1. 以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系
不随滚动条滚动

2. 固定定位不占有原来的位置。

固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。

固定定位小技巧：固定在版心右侧位置。

小算法：

让固定定位的盒子 left: 50%，走到浏览器可视区（也可以看作版心）的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。

5.6 粘性定位 sticky（了解）

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

语法：

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

固定定位的特点：

以浏览器的可视窗口为参照点移动元素。（固定定位特点）
粘性定位占有原来的位置（不脱标）。（相对定位特点）
必须添加 top、left、right、bottom其中一个才有效。

跟页面滚动搭配使用。兼容性较差，IE不支持。

2. 定位的总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	常用
absolute 绝对定位	是 (不占有位置)	带有定位的父级	常用
fixed 固定定位	是 (不占有位置)	浏览器可视区	常用
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少