掌控版面布局，固定定位妙用记录

2023-09-01 20:38:37

固定定位技术的基本概念

在介绍固定定位技术之前，我们先简单回顾一下定位属性的概念。定位属性用于指定元素在页面中的位置，有以下几种取值：

static：默认值，元素在页面中的位置由其内容决定。
absolute：元素相对于其最近的已定位祖先元素进行定位。
fixed：元素相对于浏览器视口进行定位。
relative：元素相对于其原本的位置进行定位。

固定定位技术就是利用定位属性的 fixed 取值来实现元素相对于浏览器视口进行定位。这样，无论页面如何滚动，元素的位置都会保持不变。

应用固定定位技术实现自适应布局

为了演示如何使用固定定位技术实现自适应布局，我们以一个简单的案例为例。假设我们要创建一个网页布局，其结构如下：

<div id="wrapper">
  <div id="header"></div>
  <div id="content">
    <div id="sidebar"></div>
    <div id="main"></div>
  </div>
  <div id="footer"></div>
</div>

在这个结构中，#wrapper 是整个网页的容器，#header 是页眉，#content 是内容区域，#sidebar 是侧边栏，#main 是主体内容区域，#footer 是页脚。

我们希望实现的效果是：左侧蓝色部分是固定栏，无论页面宽度或高度如何变化，该布局都能保持一致。

为了实现这个效果，我们可以使用以下 CSS 代码：

#wrapper {
  width: 100%;
  height: 100%;
}

#header {
  width: 100%;
  height: 100px;
  background-color: #333;
}

#content {
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
}

#sidebar {
  width: 200px;
  background-color: #007bff;
  position: fixed;
  top: 100px;
  bottom: 0;
}

#main {
  width: calc(100% - 200px);
  margin-left: 200px;
}

#footer {
  width: 100%;
  height: 100px;
  background-color: #333;
}

在这个 CSS 代码中，我们首先设置了 #wrapper 的宽度和高度为 100%，这样它就占据了整个浏览器视口。然后，我们设置了 #header 的宽度和高度，并为其添加了背景颜色。

接下来，我们设置了 #content 的宽度和高度。由于 #header 的高度是 100px，所以 #content 的高度是 calc(100% - 100px)，这样就确保了 #content 占据了 #wrapper 剩下的空间。然后，我们设置了 #content 为 display: flex，这样它就可以容纳两个并排的元素。

然后，我们设置了 #sidebar 的宽度和背景颜色，并将其定位为 fixed。这意味着 #sidebar 将相对于浏览器视口进行定位，无论页面如何滚动，它都将保持在相同的位置。然后，我们设置了 #sidebar 的 top 和 bottom 属性，使其占据 #content 的整个高度。

最后，我们设置了 #main 的宽度和左外边距，以确保它位于 #sidebar 的右侧。

这样，我们就实现了一个自适应的布局，左侧蓝色部分是固定栏，无论页面宽度或高度如何变化，该布局都能保持一致。