html - 响应式 Div(已定位)

Question

我制作了一个标记表生成器。生成的页面有一个 z-index=-1 的图像，所有 div 都位于图像上。但是，在浏览器中正常查看时看起来不错，但是当我单击“打印”时，定位的 div 没有响应，并且显示了一些奇怪的打印预览。如何让已经定位的div响应？

例如，我怎样才能让下面的 div 响应？HTML

#name {
  position: absolute;
  top: 17.4%;
  left: 31%;
}

#cl {
  position: absolute;
  top: 18%;
  left: 58%;
}

<div id="name">
  <font size="3" face="courier new"><b><%out.print(name);%>  </b></font>
</div>

<div id="cl">
  <font size="2" face="courier new"><b> -<%out.print(cl);%></b></font>
</div>

Answer 1

您首先需要了解定位在 css 中是如何工作的，这里是它的快速链接:https://css-tricks.com/almanac/properties/p/position/

其次，您所有的绝对子级都需要位于相对父级 div 中。

是这样的:

<div class="relative_parent">
  <div id="name">
    <font size="3" face="courier new"><b><%out.print(name);%>  </b></font>
  </div>

  <div id="cl">
    <font size="2" face="courier new"><b> -<%out.print(cl);%></b></font>
  </div>
</div>

.relative_parent{
  position: relative;
}

#name {
  position: absolute;
  top: 17.4%;
  left: 31%;
}

#cl {
  position: absolute;
  top: 18%;
  left: 58%;
}

这样做的目的是每当父 div 的像素发生变化时，它的内部子元素也将与其父元素一起移动。

Quick Tip: Never use ID's for styling in css use them in JS they have the higher specificity then classes and gives problem if modified by using different modifier.