Overlay Divs Without Absolute Position

Question

What follows is a long explanation, but it\'s the only way to effectively communicate the issue I\'m trying to resolve...

I am (somewhat desperately, and entirely un

Answer 1

Also can use flexbox to make a tabs container without absolute position:

/* Flex Overflow */
section {
  display: flex;
  width: 100%;
  overflow: hidden;
}

section article {
  flex: 100% 0 0;
  order: 0;
}

section article:target {
  order: -1;
}

/* UI */
section { background-color: #ecf0f1; }
section article { 
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ecf0f1;
  font-size: 20px;
  min-height: 8em;
  visibility: hidden;
  opacity: 0;
  transition: visibility .5s ease, opacity .5s ease;
}
section article:first-child,
section article:target {
  visibility: visible;
  opacity: 1;
}
section article#zoneA { background-color: #2980b9; }
section article#zoneB { background-color: #16a085; }
section article#zoneC { background-color: #f39c12; }
section article#zoneD { background-color: #8e44ad; }

  
Zone A
  
Zone B
  
Zone C
  
Zone D



  
A
  
B
  
C
  
D