Css之固定div头部

在CSS中如何固定头部，滚动下方内容？

1. 先完成简单的布局。并设置头部样式为 head ,内容为 content 。填充内容。

<div class="head">
    固定的头部
</div>
<div class="content">
    具体的内容
</div>

2. 使用 position: fixed; ，固定头部；使用 z-index: 9999; 将头部层级提高；利用 margin-top: 100px; 定义内容的相对位置。样式设计如下：

.head {
    position: fixed;
    width: 100%;
    height: 100px;
    top: 0px;
    z-index: 9999;
    border: 1px aqua solid;
    background-color: #0000FF;
 /* 背景颜色 */
    color: #FFFFFF;
  /* 字体颜色 */
}

.content {
    border: 2px blue solid;
    margin-top: 100px;
}

此时能固定头部，展示效果如下：