html - 子元素不响应绝对定位

Question

我正在尝试将文本 block 放置在投资组合页面上的图像上，并在该站点上查找了几种解决绝对定位问题的解决方案，但均无济于事。

我相信我对 position: absolute 的工作原理有一个公平的理解，但我的问题是我的文本没有将每个图像视为其父图像，因此参数没有达到预期的效果(即将文本放在内部的特定位置图片)。

也许我放错了容器？我很茫然。

这是 HTML:

    <div class="container-2">
    <section>
      <!--Page Title-->
      <h1 class="title-2">Portfolio</h1>  
    </section>


    <!--Project Image Links-->

    <!--Project 1-->  
    <div class="img-1">
      <img src="assets/images/colors.jpg"/>
      <div class="hangman">
        <a href="#"><h4>Hangman</h4></a>
      </div>
    </div>
    <!--Project 2-->
    <div class="img-2">
      <img src="assets/images/dj.jpg"/>
      <div class="rpg">
        <a href="#"><h4>RPG Game</h4></a>
      </div>
    </div>
    <!--Project 3-->
    <div class="img-3">
      <img src="assets/images/sunset.jpg"/>
      <div class="trivia">
        <a href="#"><h4>Trivia Game</h4></a>
      </div>
    </div>
    <!--Project 4-->
    <div class="img-4">
      <img src="assets/images/nature.jpg"/>
      <div class="rutgers">
        <a href="#"><h4>Rutgers Info Widget</h4></a>
      </div>
    </div>
    <!--Project 5-->
    <div class="img-5">
      <img src="assets/images/purple.jpg">
      <div class="rps">
          <a href="#"><h4>Rock Paper Scissors</h4></a>
      </div>
    </div>

 </div>

和 CSS:

 .img-1 {
    position: relative;
}
.img-1 h4 {
    position: absolute;
    bottom: 20px;
    background-color: #4aaaa5;
    color: #ffffff;
}

这是我修改后的文本 block 的截图: screenshot of problem

编辑:

好吧，我已经尝试了您的建议和文本(无论是 < h4> < p> 还是 < span> 最终都与作为其父级的 img 不对应。

我提前道歉，但我的 CSS 的其余部分可能遗漏了一些影响其他元素定位的东西。

这是我的 CSS:

html, body {
    height: 100%;
}
body {
    background-image: url("../images/gravel.png");
    display: flex;
    flex-direction: column;
    overflow: auto;
    clear: both;
}
/*Span of About Me page*/
.container {
    flex: 1 0 auto;
    width: 960px;
    background-color: #ffffff;
    border-color: #dddddd;
    margin: auto;
    float: left;
    padding: 5px;
}
/*Span of Portfolio page*/
.container-2 {
    position: relative;
    flex: 1 0 auto;
    width: 960px;
    background-color: #ffffff;
    border-color: #dddddd;
    margin: auto;
    padding: 5px;
}
/*Span on Contact Me page*/
.container-3 {
    flex: 1 0 auto;
    width: 800px;
    background-color: #ffffff;
    border-color: #dddddd;
    margin: auto;
    float: left;
    padding: 5px;
}
/*Sticky Footer at bottom of every page*/
.footer {
    flex-shrink: 0;
    text-align: center;
    border-top: 8px solid;
    border-color: #4aaaa5;
    background-color: #666666;
    padding: 10px;
    color: #ffffff;
    }
/*About Me Title*/
.title-1 {
    color: #4aaaa5;
    border-bottom: 4px solid;
    border-color: #cccccc;
    margin: 10px;
    font-size: 20px;
}
/*Portfolio Title*/
.title-2 {
    color: #4aaaa5;
    border-bottom: 4px solid;
    border-color: #cccccc;
    margin: 10px;
    padding: 10px;
    font-size: 30px;
}
/*Contact Title*/
.title-3 {
    color: #4aaaa5;
    border-bottom: 4px solid;
    border-color: #cccccc;
    margin: 10px;
    padding: 10px;
    font-size: 30px;
}
/*Bio Text on index.html*/
.bio {
    color: #777777;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    width: 900px;
    background-color: #ffffff;
    margin: 5px;
    padding: 5px;
}
/* Header at the top of every page*/
.header {
    background-color: #ffffff;
    border-bottom: 5px solid;
    border-color: #cccccc;
    font-family: Georgia, 'Times New Roman', Times, serif;
    padding-left: 300px;
}
/*My name at the top of each page*/
.Name {
    background-color: #4aaaa5;
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', Times, serif;
    width: 250px;
    margin: 0;
    padding: 20px;
    float: left;
}
/*Navigation buttons at the top of the page*/
.buttons {
    position: relative;
    top: 20px;
    right: 20px;
    margin: 10px;
    float: right;
    font-size: 17px;
    padding-right: 275px;
    color: #777777;
}
/*Right now just profile picture*/
img {
    margin: 5px;
    padding: 0;
    float: left;
    width: 200px;
    height: 200px;
}
/*Decoration for Navigation buttons*/
a {
    text-decoration: none;
    color: #777777;
}
/*Input boxes on contact.html*/
.inputs {
    margin: 5px;
    padding: 5px;
    color: #777777;
    font-family: Arial, Helvetica, sans-serif;
}
/*Name input box on contact page*/
.input-1 {
    height: 20px;
    width: 750px;
}
/*Email input box on contact page*/
.input-2 {
    height: 20px;
    width: 750px;
}
/*Message input box on contact page*/
.input-3 {
    width: 750px;
    height: 200px;
}
/*Submit button of contact me page*/
.submit {
    position: relative;
    left: 20px;
    top: 20px;
    background-color: #4aaaa5;
    color: #ffffff;
    margin: 5px;
    padding: 5px;
    height: 40px;
    width: 100px;
    font-size: 20px;
}

/*Project image links*/
.content-box img {
    width: 200px;
    height: auto;
}
.content-box {
    position: relative;
}
.content-box h4 {
    position: absolute;
    top: 20px;
    background-color: #4aaaa5;
    color: #ffffff;

}

和此页面的 HTML，因为有几个:

    <!DOCTYPE html>
<html lang="en-us">

<head>
    <title>Robert-Hardin-Portfolio</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>


<body>
    <header class="header">
        <!--My name!-->
      <h1 class="Name">Robert Hardin</h1>
      <!--Navigation Tabs-->

      <nav class="buttons">
        <!-- Button that leads to bio-->
        <a href="index.html">About</a>
        &#124
        <!--Button that leads to Portfolio-->
        <a href="portfolio.html">Portfolio</a>
        &#124
        <!--Button that leads to contact information-->
        <a href="contact.html">Contact</a>
      </nav>
    </header>

    <br>

  <div class="container-2">
    <section>
      <!--Page Title-->
      <h1 class="title-2">Portfolio</h1>  
    </section>


  <!--Project Image Links-->

    <!--Project 1-->  
    <div class="content-box img-1">
      <img src="assets/images/colors.jpg"/>
      <div class="content hangman">
        <a href="#"><h4>Hangman</h4></a>
      </div>
    </div>
    <!--Project 2-->
    <div class="content-box img-2">
      <img src="assets/images/dj.jpg"/>
      <div class="content rpg">
        <a href="#"><h4>RPG Game</h4></a>
      </div>
    </div>
    <!--Project 3-->
    <div class="content-box img-3">
      <img src="assets/images/sunset.jpg"/>
      <div class="content trivia">
        <a href="#"><h4>Trivia Game</h4></a>
      </div>
    </div>
    <!--Project 4-->
    <div class="content-box img-4">
      <img src="assets/images/nature.jpg"/>
      <div class="content rutgers">
        <a href="#"><h4>Rutgers Info Widget</h4></a>
      </div>
    </div>
    <!--Project 5-->
    <div class="content-box img-5">
      <img src="assets/images/purple.jpg">
      <div class="content rps">
          <a href="#"><h4>Rock Paper Scissors</h4></a>
      </div>
    </div>

 </div>

 <br><br>

 <footer class="footer">Copyright © 2019 Robert Hardin</footer>

Answer 1

您的绝对定位工作正常。我认为您的问题存在是因为您使用的是顶部和底部带有边距的 h4 标签。要么不使用 h4 标签并使用类似 span 的东西，要么重置 h4 标签的边距:

.img-1 {
  position: relative;
}

.img-1 span {
  position: absolute;
  bottom: 20px;
  background-color: #4aaaa5;
  color: #ffffff;
}

<div class="container-2">
  <section>
    <!--Page Title-->
    <h1 class="title-2">Portfolio</h1>
  </section>


  <!--Project Image Links-->

  <!--Project 1-->
  <div class="img-1">
    <img src="https://picsum.photos/200" />
    <div class="hangman">
      <a href="#"><span>Hangman</span></a>
    </div>
  </div>

</div>