35、CSS 布局全解析：从定位到页面布局策略

CSS 布局全解析：从定位到页面布局策略

1. CSS 定位基础

在 CSS 布局中，定位是一项关键技术，它能帮助我们精确控制元素在页面中的位置。常见的定位方式有相对定位、绝对定位和固定定位。

1.1 z - index 属性

z - index 属性用于改变元素的堆叠顺序。数值越高的元素会堆叠在数值较低的元素之上。例如：

#C { 
  z - index: 1;
  position: absolute;
  top: 250px;
  left: 225px;
} 

默认情况下，文档中靠后的元素会堆叠在前面元素的上方。如果想确保某个定位元素始终位于最上层，可以给它设置一个非常高的 z - index 值，如：

img#essential { 
  z - index: 100;
  position: absolute;
  top: 0px;
  left: 0px;
}

不过，在大多数页面布局中，z - index 属性并非经常需要使用，但了解它在必要时会很有用。

1.2 固定定位

固定定位与绝对定位在很多方面类似，但关键区别在于，固定定位元素的偏移值始终相对于浏览器窗口（或其他视口）。这意味着，即使页面的其他部分滚动，定位元素也会保持在原位。

例如，在 JenWARE 页面中，将奖励图形的定位从绝对定位改为固定定位：