测开：前端基础-css页面布局-定位

在CSS中，页面布局常常涉及到元素的定位问题。CSS提供了几种定位机制，包括静态定位（Static Positioning）、相对定位（Relative Positioning）、绝对定位（Absolute Positioning）、固定定位（Fixed Positioning）和粘性定位（Sticky Positioning）。

以下是一个使用绝对定位来创建复杂布局的例子：

HTML:

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="sidebar">Sidebar</div>
    <div class="main-content">Main Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS:

.container {
  min-height: 100vh;
  position: relative;
}
 
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: white;
  z-index: 10;
}
 
.content {
  position: absolute;
  top: 60px;
  bottom: 40px;
  left: 0;
  width: 100%;
  overflow: hidden;
}
 
.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #555;
}
 
.main-content {
  position: absolute;
  top: 0;
  left: 200px;
  width: calc(100% - 200px);
  height: 100%;
  background-color: #aaa;
}
 
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #333;
  color: white;
  z-index: 10;
}

在这个例子中，我们使用了绝对定位来固定各个元素在页面中的位置。.container 设置了 position: relative; 以便作为绝对定位的参照点。.header 和 .footer 被固定在顶部和底部，而 .content 被设置为从顶部的60px开始，从底部的40px结束，从而为 .sidebar 和 .main-content 提供了空间。.sidebar 占据了左侧的200px宽度，.main-content 则占据了剩余的空间。