我怎样才能让我的标题文本超出图像？答案

【问题标题】：How can I get my header text outside the image?我怎样才能让我的标题文本超出图像？
【发布时间】：2023-01-02 14:17:01
【问题描述】：

我怎样才能让我的图像中的文本脱离图像并在图像正上方有适当的填充？我尝试使用 position: absolute 但无论出于何种原因，它都会将文本带出容器区域？我该怎么做才能解决这个问题？我主要希望文本位于左侧的外侧，与其下方的图像一致。谢谢！

/*-------------------Explore Wa---------------*/

.explore-wa {
  margin: 100px;
  padding: 50px;
  display: flex;
}

.explore-wa-text h1 {
  position: absolute;
}

#image-explore {
  width: 700px;
  height: 700px;
}

#grid-image {
  width: 350px;
  height: 350px;
}

.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
}

.grid-one {
  grid-column: 1;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 1;
  grid-row: 1;
}

.grid-two {
  grid-column: 3;
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row: 1;
  grid-row: 1;
}

.grid-three {
  grid-column: 1;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 2;
  grid-row: 2;
}

.grid-four {
  grid-column: 3;
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row: 2;
  grid-row: 2;
}

<section class="explore-wa">
  <div class="explore-wa-text">
    <h1>Explore Washington State</h1>
  </div>
  <img id="image-explore" src="Images/drinking-guide-seattle-google-1000x1000.jpg">
  <div class="grid-container">
    <div class="grid-one">
      <img id="grid-image" src="Images/mt-rainier-reflection-lake-washington-2020_n81dgc.jpg">
    </div>
    <div class="grid-two">
      <img id="grid-image" src="Images/tacoma.jpg">
    </div>
    <div class="grid-three">
      <img id="grid-image" src="Images/Olympic_Reflections_itfs2s.jpg">
    </div>
    <div class="grid-four">
      <img id="grid-image" src="Images/image-asset.jpeg">
    </div>
  </div>
</section>

【问题讨论】：

标签： html css

【解决方案1】：

也将外容器网格化并移除 h1 的定位

.explore-wa {
  margin: 100px;
  padding: 50px;
  display: grid;
}

/*-------------------Explore Wa---------------*/

.explore-wa {
  margin: 100px;
  padding: 50px;
  display: grid;
}



#image-explore {
  width: 700px;
  height: 700px;
}

#grid-image {
  width: 350px;
  height: 350px;
}

.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
}

.grid-one {
  grid-column: 1;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 1;
  grid-row: 1;
}

.grid-two {
  grid-column: 3;
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row: 1;
  grid-row: 1;
}

.grid-three {
  grid-column: 1;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 2;
  grid-row: 2;
}

.grid-four {
  grid-column: 3;
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row: 2;
  grid-row: 2;
}

<section class="explore-wa">
  <div class="explore-wa-text">
    <h1>Explore Washington State</h1>
  </div>
  <div>
    <img id="image-explore" src="Images/drinking-guide-seattle-google-1000x1000.jpg">
  </div>  
  <div class="grid-container">
    <div class="grid-one">
      <img id="grid-image" src="Images/mt-rainier-reflection-lake-washington-2020_n81dgc.jpg">
    </div>
    <div class="grid-two">
      <img id="grid-image" src="Images/tacoma.jpg">
    </div>
    <div class="grid-three">
      <img id="grid-image" src="Images/Olympic_Reflections_itfs2s.jpg">
    </div>
    <div class="grid-four">
      <img id="grid-image" src="Images/image-asset.jpeg">
    </div>
  </div>
</section>

【讨论】：