使用 CSS position 組合 div 的佈局小技巧

這篇談的方法在舊的瀏覽器大概會出包, 沒有實際研究。跨瀏覽器的議題太複雜, 希望在我不得不面對這議題前, 跨瀏覽器的痛苦可以減少很多 (大概要等 Windows XP 絕跡吧)。

以下圖為例, 這篇討論兩個使用 CSS position 的小技巧。

使用 relative position 重疊版型

上圖的書本和內文, 實際上是兩個 div 組成的, 還原後如下圖:

組合的方式如下:

HTML

<div class="wrapper">
  <div class="content"></div>
  <div class="book"></div>
</div>

CSS

.wrapper {
  height: 750px;
  overflow: hidden;
}

.content {
  height: 500px;
  position: relaltive;
  z-index: 1;
}

.book {
  height: 700px;
  width: 500px;
  position: relative;
  top: -600px;
}

數據是我大概填的, 示意用。

幾個要點:

• .book 用 position: relative 從原有的位置往上移到 .content 做為背景。
• 為了讓 .content 在上方顯示, 設 z-index: 1。由於 z-index 只有在 non-static position 下才有效, 所以改一下 position。
• .book 使用 position: relative 往上移後, 仍會在原位置留下空間, 就像 visibility: hidden 一樣。為了避免占用原位置的空間, 限製 .wrapper 的 height。

這樣做的好處是內文和背景分離, 兩者各自依需求配置 div 結構, 不會互相影響。不然要顧及內文的排版而調整背景書本的 div, 切版型會滿辛苦的。

缺點是必須限制高度, 不像一般網頁彈性地隨內文增加而自動增加高度。

使用 absolute position 疊出下方的書緣

下方展開後, 中間長這個樣子, 我隱藏了左側一個 div, 方便看拆開的 div。

HTML

<div class="page-container-bottom">
  <div class="page-bottom page-bottom-left">
    <div class="page-bottom-inner page-bottom-left-inner"></div>
  </div>
  <div class="page-bottom page-bottom-right">
    <div class="page-bottom-inner page-bottom-right-inner"></div>
  </div>
</div>

CSS

.page-bottom {
  height: 30px;
  position: absolute;
  bottom: 0;
  background-color: #8F8F8F;
}

.page-bottom-left {
  border-top-right-radius: 90px 30px;
  width: 50%;
}

.page-bottom-inner {
  height: 15px;
  width: 100%;
  bottom: 0px;
  position: absolute;
  background-color: #FFF;
}

.page-bottom-left-inner {
  border-top-right-radius: 90px 15px;
}

CSS 部份只列出左半邊, 右半邊作法一樣, 只是改用 border-top-left-radius。

幾個要點:

• 左右各一個 div, 外層的 div ( .page-bottom ) 用 position: absolute + bottom: 0 做到貼齊下緣的效果。注意使用 position: absolute 的 tag 會跟著上層第一個使用 non-static position 的 tag, 在這個例子裡, 是前面提過的 div.book。
• 內層的 div ( .page-bottom-inner ) 用一樣的方式貼齊底部, 但是 height 比較矮, 且圓角弧度比較小。兩者疊出書緣的效果。

用 position: absolute 貼齊底步, 做起來出呼意料地容易。