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;
}

此時能固定頭部，展示效果如下：