CSS 重疊居中多個 DIV 及自適應正方形

Overlay Center Multiple DIV and Responsive Web Design Square DIV with CSS
響應式設計讓網站可以針對不同設備及不同尺寸螢幕瀏覽網頁時，網頁佈局會對應不同的解析度，而有不同的呈現方式、而控制 Relative 相對的位置及尺寸考量，以符合版面大小的樣式來顯示網頁的內容。

將三個 <div> 重疊居中排列，一開始設置其尺寸大小及顏色。接下來減少版面寬度就省略 CSS 尺寸大小及顏色。

<div class="source-main">
  <div class="source-A"></div>
  <div class="source-B"></div>
  <div class="source-C"></div>
</div>

div.source-main div.source-A{width:200px;height:200px;background-color:#FFD700;}
div.source-main div.source-B{width:100px;height:100px;background-color:#9ACD32;}
div.source-main div.source-C{width:50px;height:50px;background-color:#128B44;}

DIV 子層關係 Descendant Typographic Design

使用 display:flex 伸縮盒、justify-content:center 橫向左右對齊、align-items:center 上下的對齊方式。

<div class="descendant-main">
  <div class="descendant-A"><div class="descendant-B"><div class="descendant-C"></div></div></div>
</div>

div.descendant-main{display:flex; justify-content:center; align-items:center;}
div.descendant-main div.descendant-A{display:flex; justify-content:center; align-items:center;}
div.descendant-main div.descendant-B{display:flex; justify-content:center; align-items:center;}
div.descendant-main div.descendant-C{}

DIV 相鄰關係 Sibling Typographic Design

絕對定位的元素可以用於與其他元素重疊，必要時可使用 z-index 屬性，該屬性確定元素的重疊堆棧順序。

<div class="sibling-main">
  <div class="sibling-A"></div>
  <div class="sibling-B"></div>
  <div class="sibling-C"></div>
</div>

div.sibling-main{display:flex; justify-content:center; align-items:center;}
div.sibling-main div.sibling-A{position:absolute;}
div.sibling-main div.sibling-B{position:absolute;}
div.sibling-main div.sibling-C{position:absolute;}

相鄰關係排版使用絕對定位 position:absolute 但在 IE 中無法正常顯示。☹

使用 CSS 顯示正方形、自適應正方形設定方法

以 CSS 容器內緣 padding-bottom 垂直方向撐開容器，RWD Square Container 自適應可以用百分比 %，內層呈現之正方形容器、百分比是根據父級元素的 width 寬度來計算，所以先把父級元素的 width 寬度做符合版面的規劃設定，例如 max-width:900px 則正方形為 450 × 450。「兩個容器之間」的 Html 語法不要換行，其中的 <span> 只是標示或內容並不影響容器。

<div class="square-two-container">
  <div
    class="square-A"><span>SQUARE A</span></div><div
    class="square-B"><span>SQUARE B</span></div>
</div>

div.square-two-container{width:100%;max-width:900px;display:flex;}
div.square-two-container div{width:50%;height:0;padding-bottom:50%;}
div.square-two-container div.square-A{background-color:#ffd700;}
div.square-two-container div.square-B{background-color:#9acd32;}
div.square-two-container div span{line-height:100px;background-color:rgba(0,0,0,0.2);display:block;}

兩個正方形容器以 50% 左右呈現、當頁面小於 600px 則以上下呈現。

@media (max-width:600px){
  div.square-two-container{flex-flow:row wrap;}
  div.square-two-container div{width:100%;padding-bottom:100%;}
}

使用四個正方形的情況。100% ÷ 4 = 25%

div.square-four-container{width:100%;max-width:900px;display:flex;}
div.square-four-container div{width:25%;height:0;padding-bottom:25%;}
div.square-four-container div.square-A{background-color:#ffd700;}
div.square-four-container div.square-B{background-color:#9acd32;}
div.square-four-container div.square-C{background-color:#ffd700;}
div.square-four-container div.square-D{background-color:#9acd32;}
div.square-four-container div span{line-height:100px;background-color:rgba(0,0,0,0.2);display:block;}

@media (max-width:600px){
  div.square-four-container{flex-flow:row wrap;}
  div.square-four-container div{width:50%;padding-bottom:50%;}
}