How to codate this layout?

Question

1 - How to give this aspect of the "div" to be in a higher plane than the body, generating the shadow? 2 - In this case, Section has a certain transparency and div is solid?

Answer 1

This can be done with a very simple shading effect:

.teste1 {
  width: 100%;
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
}
.teste2 {
  width: 100px;
  height: 100px;
  background-color: gray;
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 5px 5px 0 rgba(0,0,0,0.24);
}

<div class="teste1">
  <div class="teste2">

  </div>
</div>

Note that the two div s have the same color, the right is that in one I applied a slight shading, so the depth level is at your discretion

Box shadow css Tricks

Answer 2

basically you need to play with the background-color, one rgba(r, g, b, 0.5) should solve, already the effect of revealing, you get with the box-shadow

html, body {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: rgb(0,150,136);
}

#header {
  position: absolute;
  height: 30px;
  width: 100%;
  background-color: rgb(238,238,238);
  box-shadow: 0px 0px 5px silver;
}

#subheader {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 60px;
  width: 400px;
  margin: auto;
  background-color: rgb(224,224,224);
  box-shadow: 0px 0px 10px black;
}

#content {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 400px;
  margin: auto;
  height: calc(100% - 120px);
  background-color: rgba(224,224,224,0.5);
  box-shadow: 0px 0px 10px black;
}

#box {
  background-color: rgb(224,224,224);
  height: 60px;
}

<div id="header">
  <div id="subheader"></div>
</div>

<div id="content">
  <div id="box"></div>
</div>