CSS 定位 – 绝对、相对、固定和粘性

CSS 定位有四种类型：相对、绝对、固定和固定。

相对位置：元素从其原始位置移动并保持文档的流动。
示例： .box{position:relative;top:2 0px;left:3 0px;} 原来的位置被占用。

绝对选择：在文档流之外，并且相对于最近的前驱或视口定位。
示例：.container{position:relative;}.box{position:absolute;top:5 0px;right:2 0px;} 当没有定位前驱时相对于视口。

固定位置：对于浏览器窗口，滚动时固定。
示例： .navbar{position:fixed;top:0;left:0;} 常用于导航栏。

固定位置：滚动到阈值之前确定相对位置，然后固定。
示例：.header{position:sticky;top:0;} 无法覆盖前驱：hidden。

z-index控制堆叠，值越大越高。
示例：.box1 {z-index:1 ;}.box2 {z-index:2 ;}。

收集模式：混合搭配以创建复杂的布局。
示例：.sidebar{position:fixed;}.content{position:relative;margin-left:2 2 0px;}。

练习：安装页眉和页脚，并确定内容区域的相对位置。
添加一个完美放置的弹出窗口。
实施粘性侧边栏。

下一步：学习变换、制作动画和添加动态效果。

实用提醒：先了解定位层次，然后尝试结合。

详解CSS的相对定位和绝对定位！

绝对的定位。
将其放置到最近的父级，否则放置在文档的开头，将其放置在顶部和左侧。
相对定位、场偏移、顶部和左侧调整位置。
定位使用不当很容易破坏您的布局。
根据您的需要选择定位方法。

相对定位、绝对定位、子绝父相、水平居中

相对定位：移动元素，保持其原始空间，并参与文档流而不丢失可见性。

绝对定位：不占用文档流之外的更多空间，需要偏移值，并且相对于最近的祖先定位。

儿子和父亲的地位绝对是一样的。
子是绝对定位的，父是相对定位的，父占据空间，子是精确移动的。

水平居中：文本对齐、边距、定位、Flexbox、网格。

垂直和水平居中：变换、Flexbox、网格、表格布局。