CSS 樣式CSS 重疊居中多個 DIV - Overlay Center Multiple DIV with CSS

CSS 重疊居中多個 DIV

Overlay Center Multiple DIV with CSS


將三個 <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

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

絕對定位的元素可以用於與其他元素重疊,必要時可使用 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;}
Point
OverlayCenterMultipleDIVwithCSS