html - 将文本框定位在 'login box' 背景图像上

Question

我有一个“背景图形”，它基本上是一个带有两个预制“白框”的设计，我想在其中放置我的登录名/密码文本框。他们顽固地拒绝从该图像的左上角移动。

我正在使用 960 网格系统，但我认为问题可能不受此影响。

我尝试过各种方法 - 尝试绝对定位、填充/边距设置。即使在 visual studio 中，我也使用菜单(喘息!)将位置选择为绝对位置并向下拖动框。在设计器中，它看起来在正确的位置，添加了 css，但在浏览器中，它又在左上角。在我的计算机了解新型“Windows”之前有什么建议吗？

我的目标是能够指定每个文本框所在位置的 x,y 坐标。我宁愿不求助于切片和表格以及所有这些东西。

css 是标准的 grid960 设置，由于尺寸原因我不会发布它。对于包含登录图像的框:

#loginPanel {
    background: url('/images/Main_Login2.png');
    height: 300px;
}

[针对#loginPanel 和#txtLogin 进行了各种定位设置，但到目前为止还没有成功]

标记:

<div id="test" class="grid_2 ">
<br />
</div>
<div id="loginPanel" class="grid_8 ">

    <asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>

</div>

感谢任何帮助!

标记

Answer 1

很多浏览量，但没有新闻。我认为这会很容易。无论如何，我找到了解决方案，不确定为什么绝对定位最初对我不起作用，但我认为秘诀在于定位容器 Divs 而不是在文本框本身上使用定位。下面的代码很有魅力，希望它能帮助别人。

<div id="loginPanel" class="grid_8 push_2">
        <div style="position: absolute; top: 122px; left: 240px; width: 200px;">
            <asp:TextBox ID="TextBox1" runat="server" Height="16px" Font-Size="Small" Width="190px"
                BorderStyle="None"></asp:TextBox>
        </div>
        <div style="position: absolute; top: 152px; left: 240px; width: 200px;">
            <asp:TextBox ID="txtPassword" runat="server" Height="16px" Font-Size="Small" Width="190px"
                BorderStyle="None"></asp:TextBox>
        </div>
    </div>