Position text in a CSS grid over an image

问题

I have a CSS grid where I need to place some text over an image. Below is shown the code I use without text over the image.

.sbp-item12 {
        grid-row: 6 / 7;
        grid-column: 9/13;
        height: 250px;
    }

<div class="sbp-item12">
    <a href="#">
       <h3>Here is a headline</h3>
       <figure>
          <img src="https://placehold.it/380x250">
       </figure>
    </a>
 </div>

I tried to add the following to the code, but then the text is going in the bottom of my page, and is not staying inside the grid item. Does anybody have an idea how I can place text over the image in my grid item?

.sbp-item12 {
    grid-row: 6 / 7;
    grid-column: 9/13;
    height: 250px;
}

.bottom-left {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 0;
    right: 0;
    bottom: 0;
}

<div class="sbp-item12">
    <a href="#">
        <div class="text-bottm-left">
            <h3>Here is a headline</h3>
        </div>
        <figure>
            <img src="https://placehold.it/380x250">
        </figure>
    </a>
</div>

回答1:

You need to set parent position:relative and set the position:absolute for the div which you want to place at bottom-left.
Note: Your Html and css classes doesn't match. You need to correct them. Below is the working snippet

.sbp-item12 {
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

figure {
  margin: 0;
  position: relative
}

.bottom-left h3{
  z-index: 100;
  position: absolute;
  color: black;
  font-size: 24px;
  font-weight: bold;
  left: 0;
  bottom: 0;
  margin:0
}

<div class="sbp-item12">
  <a href="#">
    <figure>
      <img src="https://placehold.it/380x250">
      <div class="bottom-left">
        <h3>Here is a headline</h3>
      </div>
    </figure>
  </a>
</div>

回答2:

Try this:

* {
  margin: 0;
  padding: 0;
}

.bottom-left {
  /* Insert your text styling here*/
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.sbp-item12 {
  position: relative;
  display: inline-block;
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

.sbp-item12 .bottom-left {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  /* If text should be centered: */
  /* text-align: center; */
}

<div class="sbp-item12">
  <a href="#">
    <div class="bottom-left">
      <h3>Here is a headline</h3>
    </div>
    <figure>
      <img src="https://placehold.it/380x250" alt="Here is a headline" />
    </figure>
  </a>
</div>

回答3:

Try this:

.sbp-item12 {
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

div.img-post {
  position: relative;
}

h3.img-title { 
  position: absolute;
  z-index: 1;
  left:175px; 
}

img.img-body { 
  position: absolute
}

<div class="sbp-item12 img-post">
    <a href="#">
       <h3 class="img-title">Here is a headline</h3>
       <figure>
          <img class="img-body" src="https://placehold.it/380x250">
       </figure>
    </a>
 </div>

回答4:

You just mistake in your code change this class="text-bottm-left" and add it class="bottom-left" I hope it will be work.

<div class="sbp-item12">
    <a href="#">
        <div class="bottom-left">
            <h3>Here is a headline</h3>
        </div>
        <figure>
            <img src="https://placehold.it/380x250">
        </figure>
    </a>
</div>

回答5:

You need to set the parent div in relative position using position: relative and then after setting the text into absolute position using position: absolute.

You use other CSS property like left, right, top, bottom to set the test wherever you want.

来源：https://stackoverflow.com/questions/56881151/position-text-in-a-css-grid-over-an-image

标签

html

css