CSS 定位

定位 position

什么是定位？

定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果你想要创建一个浮动在页面其他部分顶部的 UI 元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。

CSS提供了许多不同类型的定位，你可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用position属性。

.son1{
    position: absolute;
    top: 10px;
}//设置class为son1的盒子为绝对定位，距离父元素上边线10px

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

静态定位

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置”——这里没有什么特别的

相对定位

相对定位是我们将要看的第一个位置类型。它与静态定位非常相似，但是他有这几个特点

• 不脱离标准流，保留原来位置

• 参考点：原来的自身位置

参考点是原来的自身位置，那么如何改变元素位置？

介绍top、bottom、left 和 right

top,bottom,left,right来精确制定要将定位元素移动到的位置。

属性	语义
top	定位元素距离其父元素的上边线的距离
bottom	定位元素距离其父元素的下边线的距离
right	定位元素距离其父元素的右边线的距离
left	定位元素距离其父元素的左边线的距离

绝对定位

绝对定位带来了非常不同的结果，他有如下几个特点

• 脱离标准流，不占用原来位置

• 参考点：离自己最近的设置了定位的父元素移动

• 如果没有祖先元素，或者祖先元素没有定位，则以浏览器为参照物

• 行内元素设置了固定定位和绝对定位，会转为块。

固定定位

还有一种类型的定位覆盖——fixed。这与绝对定位的工作方式完全相同，只有一个主要区别，固定定位参考点永远是浏览器窗口，这意味着你可以利用固定定位创建导航菜单之类的元素。

粘性定位

还有一个可用的位置称为sticky，它基本上是相对定位和固定定位的混合体，有着如下几个特点

• 以浏览器的窗口为参照点移动元素（固定定位）

• 占有原来的位置，不脱离标准流（相对定位）

• 必须添加top,bottom,left,right其中一个才有效，跟页面滚动搭配使用，例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

“子绝父相”的思想

子级使用绝对定位，父级则需要相对定位

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

• 父盒子布局时，需要占有位置