一、CSS定位布局[相对定位、绝对定位、固定定位]

一、CSS定位布局

1.relative

解释：元素在原来的位置开始移动(position:relative;left:20px;距离20px)，这种移动是左移右移上移下移多少长度（left:20px距离参照系左边距离20px；right:20px距离参照系右边距离20px；top:20px距离参照系顶部距离20px；bottom:20px距离参照系底部距离20px）

• 参照系：参照系是自己其原本的位置

特性：对象不可层叠、不脱离文档流

• 不脱离文档流：对比绝对定位（绝对定位会脱离文档流）
• 不可层叠：对比绝对定位（绝对定位可以多层叠在一起）

2.absolute

解释：元素以绝对位置开始移动（left:20px距离参照系左边距离20px；right:20px距离参照系右边距离20px；top:20px距离参照系顶部距离20px；bottom:20px距离参照系底部距离20px）

• 参照系：当父元素有relative属性或者absolute时，就以父元素为参照物；父元素无，向祖先辈开始寻找，直到某祖先有relative属性或者absolute，就以该祖先为参照物；如果祖先全无relative属性或者absolute，就以body为参照物；常常让父元素为相对定位子元素为绝对定位，称为子绝父相

特性：脱离文档流(意味着可以与普通文档元素重合)，行内块特性（与浮动元素一样，无论原本元素是怎样都是默认有display:inline-block;）

3.固定定位

解释：元素固定在页面某个位置，无论页面怎么滑动，它相对于屏幕永远固定于那里

注意：其有absolute的特征，只不过参照系是body，不会是其它（在设置left等等就会使用absolute的特征）；通过不设置left、right、bottom和top就能避免相对于body移动而是像普通元素一样布局
代码：position: fixed;

4.层级显示

代码：z-index:10;

解释：通过 z-index 控制元素的上下层级，数值越大越在上面即越先显示

前提：需要元素上写有position:relative;或position:absolute;

使用场景：

• 设置给兄弟元素，兄弟元素之间确定哪个先展示（父级子元素设置 z-index 没有意义，子元素永远在父元素上面的）
• 一个元素使用absolute或者relative遮盖到了普通元素（给普通元素设置position和z-index优先显示）
• 等等

5.总结

说明：尽量不要使用position来进行布局，因该用其来微调，而不是布局，其布局会造成父元素没有高度（这种问题只能给父元素设置高度来解决，其不同于浮动，无法消除影响），布局建议使用margin与flex

这篇好文章是转载于：学新通技术网