创建一个将覆盖图像的div，并用petsData信息填充它。样式将div覆盖为position:absolute，并适当设置top，width和z-index值。

请注意，为了使position:absolute在覆盖div上工作，父div的样式必须为position:relative（或absolute-除了默认的statice)以外的任何样式

null

const petsData = [{
    name: "Purrsloud",
    species: "Cat",
    favFoods: ["wet food", "dry food", "<strong>any</strong> food"],
    birthYear: 2016,
    brick: "brick",
    photo: "https://learnwebcode.github.io/json-example/images/cat-2.jpg"
  },
  {
    name: "Barksalot",
    species: "Dog",
    birthYear: 2008,
    photo: "https://learnwebcode.github.io/json-example/images/dog-1.jpg"
  },
  {
    name: "Meowsalot",
    species: "Cat",
    favFoods: ["tuna", "catnip", "celery"],
    birthYear: 2012,
    photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
  }
];





function petTemplate(pet) {
  return `
     <div class="animal">
        <img class="pet-photo" src="${pet.photo}"> 
        <h2 class="pet-name">${pet.name} <span class="species">(${pet.species})</span></h2>
        <div class="olay">
            <div>Name: ${pet.name}</div>
            <div>Type: ${pet.species}</div>
            <div>Favs: ${pet.favFoods !== undefined ? pet.favFoods : ''}</div>
            <div>Born: ${pet.birthYear}</div>
        </div>
     </div>
  `;
}

document.getElementById("app").innerHTML = `
     <h1 class="app-title">Pets (${petsData.length} results)</h1>
     ${petsData.map(petTemplate).join("")}
  `;

.img {
  max-width: 400px;
  position: relative;
}

.app-title {
  text-align: center;
  font-weight: normal;
  font-size: 2.6rem;
}

.animal {
  max-width: 650px;
  padding: 20px;
  margin: 30px auto;
  background-color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.animal h4 {
  margin: 0 0 6px 0;
}

.pet-photo {
  float: left;
  width: 100%;
  display: block;
  transition: all linear 0.7s;
  margin-right: 15px;
  position: relative;
}

.pet-name {
  font-size: 2rem;
  font-weight: normal;
  margin: 0 0 1rem 0;
}

.species {
  font-size: 0.9rem;
  color: #888;
  vertical-align: middle;
}

/*  ADDED  */
.animal{position:relative;}
.olay{
  position:absolute;
  z-index: 1;
  top: 30%;
  width: 100%;
  padding: 0 10%;
  font-size: 2rem;
  color: lightcyan;
}

<div id="app"></div>
<script src="main.js"></script>