答辩司(已到位)

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 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中使用它们，它们具有更高的特异性，然后类，如果使用不同的修饰符进行修改，则会出现问题。