Question

我的网页包含两件事：一张将调整大小调整窗口大小的图片，然后是一张包含4个文本框的图片，这些文字框位于图片顶部的特定位置。

我的问题是文本框移动方式在窗口调整大小时的位置。我已经花了6个多小时把头发拉出去尝试css和jquery中的所有东西，但是没有什么可以开始工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
    body
    {
        margin: auto;
        width: 100%;
    }

    .Wrapper
    {
        position:relative;
        min-width: 500px;
        width: 100%;
        margin:auto;
    }

    .Image
    {
        max-width: 1150px;
        max-height: 1453px;
        width: 100%;
    }

    .Form
    {
        position: relative;
        top:-260px;
        left: 200px;
        width: 130px;
        border: solid 1px #000;
    }
</style>
</head>
  <body>
      <div class="Wrapper">
        <div>
            <img src="image.png" class="Image" />
        </div>
        <div class="Form">
            <input type="text" />
            <br />
            <input type="text" />
            <br />
            <input type="text" />
            <br />
            <input type="text" />
        </div>
    </div>
 </body>
</html>

完整窗口： enter image description here

调整大小的窗口： enter image description here

Answer 1

首先，您应该将最大尺寸设置为包装器，并使图像占据100％宽度。您还应该将表单定位为绝对值而不是相对值，并将其从底部定位。这样的事情：http://jsfiddle.net/ndqna/2/

那个说，效果尚未完全无瑕。随着图像缩放，表单的位置将需要更改。您可以尝试使用百分比来接近该位置。这样的事情：http://jsfiddle.net/ndqna/3/

.Form
{
    position: absolute;
    bottom: 10%;
    left: 15%;
    border: solid 1px #000;
}

正如您将注意到它仍然不完美。如果你真的想要精确定位，你需要做一些脚本来计算确切的位置。然而，在开始编写jQuery代码之前，为什么不将“框”设置为表单的背景，并通过切割源图像将其从页面的背景图像中删除？这样，定位不需要像素完美，因为盒子将随着形式移动......

Answer 2

这可能是因为你的包装器css。尽量不要使用最小或最大宽度，只需使用固定宽度。

.Wrapper
    {
        position:relative;
        width: 945px;
        margin:auto;
    }

Fiddle

保持元素位于窗口大小调整的相同位置

2 个答案: