Stacking context

by kmouse

HTML

<div class="wrapper">
  <div class="box" id="a">A<br />AA</div>
  <div class="box" id="b">B<br />BB</div>
</div>

<div class="wrapper">
  <div class="box">A<br />AA</div>
  <div class="box" style="position: relative; z-index: -1;">B<br />BB</div>
</div>

<div class="wrapper">
  <div class="box">A<br />AA</div>
  <div class="box" style="position: relative;">B<br />BB</div>
</div>

<div class="wrapper">
  <div class="box">A<br />AA</div>
  <div class="box" style="position: relative; z-index: 0;">B<br />BB</div>
</div>

<div class="wrapper">
  <div class="box">A<br />AA</div>
  <div class="box" style="display: inline-block;">B<br />BB</div>
</div>

<div class="wrapper flex">
  <div class="box">A<br />AA</div>
  <div class="box">B<br />BB</div>
</div>

CSS

.box {
  border: 2px solid #d66;
  background: #fff;
  text-align: center;
  width: 25px;
  height: 23px;
}

.wrapper {
	margin: 20px 0;
}

.flex {
  display: flex;
	flex-direction: column;
}

#b { overflow: none; }