文章/答案/技术大牛

发布

社区首页 >问答首页 >正确的CSS在文档中的位置

问正确的CSS在文档中的位置
EN

Stack Overflow用户

提问于 2011-03-17 13:11:08

回答 1查看 465关注 0票数 1

我有一个HTML表单，里面有一个表格。守则如下：

我的代码：

    <html>
    <head></head>

    <body>
        <form onsubmit="" id="form1" action="" method="post" name="form1" style="position: relative; background-color: green;">
    <table style="width: 908px; background-color: yellow; position: absolute; left: 350px; top: 350px;" border="0">
        <tbody><tr>
            <td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
        </tr><tr>
            <td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
        </tr><tr>
            <td></td><td style="width: 34%;" align="center">For assistance please see <a href="">Help</a> page<br><br></td><td></td>
        </tr>
    </tbody>
</table>

    <input value="" id="StoredProcedure" name="StoredProcedure" type="hidden"><input value="False" id="SubmitFile" name="SubmitFile" type="hidden"><input value="False" id="" name="" type=""><input value="" id="" name="" type="hidden"><input value="False" id="" name="" type="hidden">

    </form>
    </body>
    </html>

我正在尝试使表移动，就像在这教程站点上给出的示例中嵌入的标记所做的那样。我试图模仿的特定示例的代码如下所示：

示例代码：

<html>
<head>
<style type="text/css" media="screen">

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}


#example {
 float:right;
}

#example div {
}

#div-before, #div-after {
 background-color:#88d;
 color:#000;
}
#div-1 {
 width:400px;
 background-color:#000;
 color:#fff;
}
#div-1-padding {
 padding:10px;
}
#div-1a {
 background-color:#d33;
 color:#fff;
}
#div-1b {
 background-color:#3d3;
 color:#fff;
}
#div-1c {
 background-color:#33d;
 color:#fff;
}
#example div p {
 margin:0 .25em;
 padding:.25em 0;
}
#description {
 float:left;
 width:40%;
}
pre {
 padding:1em;
 border:1px dashed #aaa;
 background:#fafafa;
}
p {
 margin:0.5em 0;
}
h3 {
 color:#999;
}

.job {
margin-top:1em;
border:1px solid #aaa;
padding:1em;
background:#ddd;
}

</style>
</head>

<body>
<div id="example">

<div id="div-before">
<p>id = div-before</p>
</div>

<div id="div-1">
<div id="div-1-padding">

<p>id = div-1</p>

<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>

<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>

<div id="div-1c"><p>id = div-1c</p></div>

</div></div><!-- /id=div-1-padding /id=div-1 -->

<div id="div-after">
<p>id = div-after</p>
</div>

</div><!-- /id=example -->

</body>
</html>

要描述我试图完成的任务，请注意，当您调整浏览器的大小以使其变小时，示例代码的主div和它的子div将与浏览器一起移动，但当它不能再适合浏览器窗口时仍然保持比例；而对于My Code，表单的子表，即内表，即使我重新调整浏览器的大小，也将保持在相同的位置。我想让它像这个例子一样移动，我很困惑，因为我的直觉告诉我，由于表是嵌入在表单中的，即使它绝对位于表单中，它也应该移动，因为它只相对于它的父元素而不是浏览器窗口。我遗漏了什么吗？

注意：

为了避免混淆，在My Code中，我添加了仅供个人参考的背景色，可以忽略它们。

更新：

下面是指向每个页面演示的链接：示例演示、我的代码演示

更新(解决方案)：好的，我能够解决它。我所做的是将整个表单包装在一个div标记中，并给它以下样式：position: relative; background-color: green; width: 910px; margin: 0px auto;。我还删除了表单样式，并将表样式更改为以下内容：width: 908px; background-color: yellow; position: absolute; left: 0px; top: 350px;。这会将所有内容移动到中心，并反映示例代码中描述的行为。以下是修改后的代码，供今后参考。我仍然很好奇，为什么当样式被应用到表单中时，这种方法就不能工作呢？在div和表单标记之间如何处理样式有根本的区别吗？谢谢你的建议。

<html>
        <head></head>

        <body>
            <div style="position: relative; background-color: green; width: 610px; margin: 0px auto;">
            <form onsubmit="" id="form1" action="" method="post" name="form1">
        <table style="width: 908px; background-color: yellow; position: absolute; left: 0px; top: 350px;" border="0">
            <tbody><tr>
                <td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
            </tr><tr>
                <td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
            </tr><tr>
                <td></td><td style="width: 34%;" align="center">For assistance please see <a href="">Help</a> page<br><br></td><td></td>
            </tr>
        </tbody>
    </table>

        <input value="" id="StoredProcedure" name="StoredProcedure" type="hidden"><input value="False" id="SubmitFile" name="SubmitFile" type="hidden"><input value="False" id="" name="" type=""><input value="" id="" name="" type="hidden"><input value="False" id="" name="" type="hidden">

        </form>
            </div>
        </body>
        </html>

html

css

web-applications

xhtml

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-03-19 04:46:01

..。因为它是相对于它的父元素定位的，而不是浏览器窗口。我遗漏了什么吗？

是。

您可能想阅读有关绝对定位的文章：(来自w3schools)

绝对位置元素相对于具有非静态位置的第一父元素定位。

因此，绝对定位元素不是相对于其父元素定位的，而是第一个非静态定位的祖先元素。

什么是静态定位？position CSS属性有4个可能的值：

静态
相对的
绝对的
固定

静态是默认的定位。因此，第一个祖先元素(它的值为position而不是静态元素(默认值)是您的绝对定位元素将自己定位在.不一定是家长。

在您的代码中，只需要向position:relative;元素添加一个<form>。您不需要将<form>封装在<div>中。这太过分了。在您的最终解决方案中，<div>没有做<form>不能做的事情--它们都是块级元素。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5345292

复制

相似问题

问正确的CSS在文档中的位置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确的CSS在文档中的位置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确的CSS在文档中的位置
EN