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的像素发生变化时，其内部子对象也会随其父对象一起移动。

快速提示：绝对不要在CSS中使用ID进行样式设置，而在JS中使用ID则它们比类具有更高的特异性，如果使用其他修饰符进行修改，则会出现问题。

响应Divs（已确定）

1 个答案: