子元素不响应绝对定位

Question

我正在尝试将文字块放置在图片页上的图像上，并且已经找到了几种解决该站点上绝对定位问题的解决方案，但无济于事。

我相信我对位置的理解是很清楚的：绝对有效，但是我的问题是我的文本没有将每个图像都当作其父对象，因此参数没有达到预期的效果（即，将文本放在内部的特定位置图片）。

也许我没有正确放置容器？我很茫然。

这是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;
}

这是我修改的文本块正在执行的屏幕截图： screenshot of problem

编辑：

好吧，我已经尝试了您的建议和文本（无论是

还是都最终与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标签并使用跨度之类的东西，或者重置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>

Answer 2

您在容器中有四个div元素，并且其中包含图像和h4标签。首先，您需要将父元素定位于relative，即容器内的所有框都应该是相对的。请查看下面的解决方案

http://mrhaki.blogspot.com/2016/09/awesome-asciidoctor-change-level-offset.html html

<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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiA15Ti_v2m1EcYm_xsMD2oVJ9b5cJGICrW1GSIkf5DM6v7T3P" />
      <div class="content hangman">
        <a href="#"><h4>Hangman</h4></a>
      </div>
    </div>
    <!--Project 2-->
    <div class="content-box img-2">
      <img src="https://cdn2.unrealengine.com/Unreal+Engine%2Fblog%2Flearn-how-to-develop-high-end-mobile-games-in-ue4-with-the-action-rpg-game-sample-project%2FFB_ActionRPGSampleProject-1200x675-555c51d61fc8276009080bab27f74deacf5fabda.jpg"/>
      <div class="content rpg">
        <a href="#"><h4>RPG Game</h4></a>
      </div>
    </div>
    <!--Project 3-->
    <div class="content-box img-3">
      <img src="http://www.bridgeclimb.com/wp-content/uploads/2015/04/160215-ALBERT-YIN-208180549.jpg"/>
      <div class="content trivia">
        <a href="#"><h4>Trivia Game</h4></a>
      </div>
    </div>
    <!--Project 4-->
    <div class="content-box img-4">
      <img src="http://www.newark.rutgers.edu/sites/default/files/rutgersskyline_1.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="https://media.istockphoto.com/photos/purple-abstract-background-picture-id504039848?k=6&m=504039848&s=612x612&w=0&h=i-EyrYnpw0U-Zfp4gjLU4QSrvMp-Ildnjchcgt1wpHQ=">
      <div class="content rps">
          <a href="#"><h4>Rock Paper Scissors</h4></a>
      </div>
    </div>

 </div>

`

    img {
      width:300px;
      height:auto;
    }
    .content-box{
      position: relative;
    }

    .content-box h4 {
        position: absolute;
        bottom: 20px;
        background-color: #4aaaa5;
        color: #ffffff;
        left:15px;
    }