通过设置CSS中的position属性来固定层的位置

通过设置CSS中的position属性来固定层的位置，一般常用的属性是position:fixed和position:absolute。其中，position:fixed是相对于浏览器窗口而言的固定定位，而position:absolute是相对于最近的带有定位属性（position不为static）的父级元素进行定位的，如果不存在父级元素，则是相对于body元素进行定位的。

以下是两个使用示例：

示例1：

HTML代码：

<div id="nav">
  <ul>
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
  </ul>
</div>

<div id="content">
  <!-- 内容区域 -->
</div>

CSS代码：

#nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
}

#content {
  margin-top: 50px;
  /* 这里的50px表示#nav的高度（或者说nav与content之间的距离） */
}

这个示例中，我们使用了position: fixed来固定网页顶部的导航栏。其中，top: 0和left: 0表示将元素固定在浏览器窗口的左上角；width: 100%表示设置宽度为100%，即占据整个窗口的宽度。

然后，在内容区域中，我们通过设置margin-top: 50px来为内容留出与导航栏相同高度的空间，使内容不会被导航栏遮挡。

示例2：

HTML代码：

<div class="container">
  <div class="box"></div>
</div>

CSS代码：

.container {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #eee;
}

.box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #333;
  color: #fff;
}

这个示例中，我们为包含内容的容器添加了position: relative的定位属性，表示该容器作为绝对定位元素的相对定位父元素。然后，我们创建一个“盒子”元素，并为其添加了position: absolute的定位属性，表示该元素是绝对定位的。我们设置了该元素距离父元素顶部和左侧都有50px的距离（即top: 50px和left: 50px）。最后，我们设置了盒子的宽度和高度，并为其添加了背景颜色和文本内容。

通过这个示例，我们可以看到当容器（.container）的高度和宽度变化时，盒子元素（.box）的位置是相对于其父元素进行定位的。因此，在实际使用中，我们可以利用这种相对定位的特性对元素进行定位，从而实现更加灵活和自适应的页面布局。