.shelf {
  display: block;
  z-index: 9;
  content: url("https://i.imgur.com/1QepZRl.png");
  position: relative;
  width: 941px;
  height: 175px;
  margin-left: auto;
  margin-right: auto;
}

.stuffonshelf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 10;
  margin-bottom: -80px; /* This is what actually puts the stuff ON the shelf instead of hovering above it */
  width: 770px;
  margin-left: auto;
  margin-right: auto;
}

.example { /* Of course, you can delete this */
  width: 200px;
  height: 200px;
  padding: 5px;
  background-color: magenta;
}

.example2 { /* Of course, you can delete this */
  width: 200px;
  height: 300px;
  padding: 5px;
  background-color: magenta;
}<div class="stuffonshelf"> <!--This is the div that contains everything you want to put on the shelf. -->
  <div class="example">heehee</div> <!-- Don't worry about these, they're just examples of things you can put on the shelves -->
  <div class="example">hoohoo</div>
  <div class="example">haha</div>
</div>
<img class="shelf"> <!-- This is the shelf itself, you don't need to specify a src because the CSS takes care of that -->

<br>

<div class="stuffonshelf">
  <div class="example2">bada bing</div> <!-- Shows how it works with differing heights -->
  <div class="example">bada boom</div>
  <div class="example">fuggedabaoutit</div>
</div>
<img class="shelf">

<br>

<div class="stuffonshelf">
  <div class="example">bada bing</div>
  <img src="https://melonking.net/webgarden/tumblr_nfv4336ffD1tsxfu3o1_500.png"> <!-- It works with images too! If your image has empty space at the bottom, you might wanna crop it though (or at least give it a custom negative margin) -->
  <div class="example2">fuggedabaoutit</div>
</div>
<img class="shelf">