html - 在其他 div 之上分层 div

Question

我正在尝试创建一个简单的第 2 页 div，它是全屏的，用作背景颜色。然后，我将 2 个较小的 div 叠加在这些背景 div 之上，我可以将单词放入其中，并在其下方放置一个按钮以随机化单词。 (截图附上我想要实现的目标)。

Screenshot of Layout

我目前有这段用于背景 div 的代码，但我似乎可以在这些 div 之上添加任何东西......

.container {
  height: 100%;
  padding: 0;
  text-align: center
}

.inner {
  width: 50%;
  height: 100%;
  display: inline-block;
}

.inner.left {
  background-color: brown;
}

.inner.right {
  background-color: grey;
}

<div class="container">
  <div class="inner left"></div>
  <div class="inner right"></div>
</div>

Answer 1

你是否期待这样的:

body,html{
margin:0;
padding:0;
}
.one{
width:50%;
background-color:brown;
float:left;
margin:auto;
height:100vh;
}
.inner_1{
  margin: 0;
  position: absolute;
  top: 50%;
  right:50%;
  width:200px;
  line-height:60px;
  background-color:yellow;
  text-align:center;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.inner_2{
  margin: 0;
  position: absolute;
  top: 50%;
  background-color:#7be0ff;
  width:200px;
  line-height:60px;
  text-align:center;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.two{
width:50%;
background-color:#bebebe;
float:left;
height:100vh;
}
.button{
 margin: 0;
 position: absolute;
 top:70%;
 background-color: #6afa70; /* Green */
 left: 50%;
 -ms-transform: translate( -50%);
 transform: translate(-50%);
 border:none;
 text-decoration: none;
 }

<div class="one">
<div class="inner_1">Div layer on top 1</div>
</div>
<div class="two">
<div class="inner_2">Div layer on top 2</div>
</div>
<input type="button" class="button" value=" Button">