.hover 时，margin-top 为 % 移动的文本，但不以 px 为 margin-top答案

【问题标题】：Text with margin-top as a % moving when .hover, but not with margin-top as a px.hover 时，margin-top 为 % 移动的文本，但不以 px 为 margin-top
【发布时间】：2017-02-13 12:35:46
【问题描述】：

我正在最后一个学期攻读软件开发的 AAS。我目前被这个网络开发问题所困扰。

我的最终目标是制作一个带有文本叠加层的响应式 img，该文本叠加层与图像一起响应。我有 img 响应式，我将它的 z-index 设置为 -2，但文本正在起作用。当我将 margin-top 用作 px 时，文本会停留在我想要的位置，但会响应。当我将 margin-top 更改为 % 并将鼠标悬停在 ITSP 136 文本上时，DBMS110 会跳转到一个新位置

https://jsfiddle.net/1euxhL41/1/

html 常春藤科技

</head>

<body>

<!-- text over image w/ Bootstrap -->
<div class="container">

<img id="image" src="road2.png" class="img-responsive img-center" />

<!-- red titles -->
<div id="red-program" style="color: red">
Program
</div>

<div id="red-semester" style="color: red">
Semesters
</div>

<div id="red-courses" style="color: red">
Courses
</div>

 <div id="red-certs" style="color: red">
Certificates
</div>

<div id="red-jobs" style="color: red">
Jobs Outlooks
</div>
<!-- end red titles -->

<!-- start blue -->




<!-- helpdesk courses -->


   <div id="blue-ITSP136" style="color: blue"><a       href="https://wwwapps.ivytech.edu/cor3/i/6/0/mDCTODTLlWZO2hySBKcpgzAr03nJfI0kiWM         43cOeuTf2Q6R4smCKrvPVsJpAJlXP">
    ITSP 136
     </a></div>
    <div class="hover-ITSP136"><strong><u>PREREQUISITES:</u></strong>    <br>ITSP    135 Hardware/Software Support <br><br>
       <strong><u>COREREQUISITES:</u></strong><br>ITSP 135 Hardware/Software      Support </div>

 <div id="blue-DBMS110" style="color: blue"><a     href="https://wwwapps.ivytech.edu/cor3/v/5/8/ShvDHWoZZhDiRBwfRU3ymfLRDKEfG9g8yvZ      Z7Hf4Kwh5z05RpJp0uPwamcMtDa4w">
DBMS 110
 </a></div>
  <div class="hover-DBMS110"><strong><u>PREREQUISITES:</u></strong><br>INFM       109 Informatics Fundamentals <br><br>
    <strong><u>COREREQUISITES:</u></strong><br>INFM 109 Informatics      Fundamentals </div>




 <!-- end helpdesk courses-->
 <!-- end blue-->

 <!-- Start purple -->


 <!-- start purple courses -->

 <!-- end purple courses -->

 <!-- end purple  -->


 <!-- end container -->
 </div>



 </body>
 </html>

css

    html, body {
         margin: 0;
         padding: 0;
         width:100%;
      }


      .info {
           padding: 20px;
           font-size: 75%;
        }


      .footer{
         position: absolute;
         bottom:0px;
         height: 5%;
         width:100%;

        }



       iframe {
           margin-top: 20px;
     }

       .container {
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}


#blue-DBMS110 a:link{
  z-index: 0;
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  margin: 13% 0 0 46%;

}

.hover-DBMS110{
    background:rgba(0,0,0,0.5);
    padding: 20px;
    display: none;
    z-index: 0;

}

#blue-DBMS110:hover + .hover-DBMS110 {
    display: block;
    width: 200px;
    color: white;
    z-index: 0;
    margin-left: 28%;
    margin-top: 13%;
}

#blue-ITSP136 a:link{
  z-index: 0;
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  margin: 14% 0 0 46%;

}

.hover-ITSP136{
    background:rgba(0,0,0,0.5);
    padding: 20px;
    display: none;
    z-index: 0;

}

#blue-ITSP136:hover + .hover-ITSP136 {
    display: block;
    width: 200px;
    color: white;
    z-index: 0;
    margin-left: 28%;
    margin-top: 13%;
}





#red-program {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 3.5%;
  margin-top: 11%;
}

#red-semester {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 13%;
  margin-top: 11%;
}

#red-courses {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 42%;
  margin-top: 7%;
}

#red-certs {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 57%;
  margin-top: 7%;
}

#red-jobs {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 77%;
  margin-top: 7%;
}

感谢您的帮助， “印第安纳州北部的马特”

【问题讨论】：

顺便说一句，您最好将这些信息弹出窗口移到前面（z-index）并在链接下方。

标签： html css image text responsive

【解决方案1】：

您需要绝对定位您的弹出窗口。

.hover-DBMS110,
.hover-ITSP136 {
  position: absolute;
}

https://jsfiddle.net/tikosar/bvw71q5e/

【讨论】：