javascript - 使用浏览器调整大小调整、移动和缩放图像和文本 div

Question

我认为这是在 Google 中寻找的一个非常常见的问题，但我似乎找不到答案。任何帮助将不胜感激。

我有一个带有全尺寸可调整大小背景图像的网页。像这样:

html
{
    background-size:contain;
    background: black url(../images/myimage.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
}

在图像上，我有一个专用于包含图像的 z 层 DIV 和另一个包含一些文本的 z 层 DIV 的部分。

当我开始重新调整浏览器窗口大小时，我的页面 DIV 变得疯狂。当页面及其背景图像变小时，它们实际上保持静止不动。

如何确保包含图像、链接和文本的 DIV 始终位于正确的位置，无论用户的屏幕分辨率是多少，或者无论他们如何调整浏览器的大小。 CSS？ Javascript ？查询？最好的方法是什么？

提前致谢!!!

附注如果有什么不清楚并且需要 sample ，请告诉我。

Answer 1

CSS 是您最好的选择。您需要根据情况将 div 的位置设置为 fixed、absolute 或 relative。 fixed 将导致元素在用户滚动时保持其位置，而 absolute 将导致元素与页面的其余部分一起滚动，并且将移动到您指定的任何位置不管它是否在其他东西里面。 relative 获取它相对于它所在的任何父容器元素的定位，或者如果它不在另一个容器元素内则相对于窗口本身的定位。

如果它是fixed 或absolute，分配一个right 将在用户调整尺寸时保持它的位置与屏幕右侧对齐窗口或取决于分辨率，left、top 和 bottom 也将相应地执行操作。您可以为它们分配一个百分比，该百分比也会根据分辨率或调整大小而相应变化。或者您可以分配一个以像素、厘米、毫米、英寸为单位的硬编码值，etc...这是一个 jfiddle作为代码示例