logo标签列表

HTML/CSS：在<fieldset>中绝对定位元素

htmlcsscss-position
3

"绝对"是否真的是绝对的？

我正在尝试创建一个包含其他元素的嵌套元素的输入表单，但它没有正确显示（根据屏幕标尺和肉眼观察）。

HTML是有效的，所以这是一种“好吧，它是绝对的，但只是相对于其包含的文件夹”之类的情况吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="C:\temp\a_test.php" method="get"><div class="TGroupBox" id="GroupBox1">
<fieldset style="position: absolute; top:24px; left:24px; width: 449px; height: 473px;">
<legend>GroupBox1</legend>
<div class="TPanel" id="Panel1">
<fieldset style="position: absolute; top:64px; left:64px; width: 361px; height: 217px;">
<legend></legend>
<div class="TComboBox" id="ComboBox1" style="position: absolute; top:88px; left: 256px; width: 145px; height: 21px;">
  <select name="ComboBox1">
    <option value="- one -" selected="selected">- one -</option>
    <option value="- two -">- two -</option>
    <option value="- three -">- three -</option>
</select>
</div>
<div class="TGroupBox" id="GroupBox2">
<fieldset style="position: absolute; top:80px; left:88px; width: 145px; height: 177px;">
<legend>GroupBox2</legend>
<div class="TCheckBox" id="CheckBox1" style="position: absolute; top:112px; left: 104px; width: 97px; height: 17px;">CheckBox1<input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div>
<div class="TCheckBox" id="CheckBox2" style="position: absolute; top:152px; left: 112px; width: 97px; height: 17px;">CheckBox2<input type="checkbox" name="CheckBox2" value="CheckBox2Checked"checked="checked"></div>
</fieldset>
</div>
<div class="TRadioGroup" id="RadioGroup2">
<fieldset style="position: absolute; top:128px; left: 264px; width: 145px; height: 137px;"><legend>RadioGroup2</legend>

eins: <input type="radio" name="RadioGroup2" value="eins" checked><br>

zwei: <input type="radio" name="RadioGroup2" value="zwei"><br>

drei: <input type="radio" name="RadioGroup2" value="drei"><br>
</fieldset>
</div>
</fieldset>
</div>
<div class="TMemo" id="Memo1"><textarea name="Memo1" rows="8" cols="13" style="position: absolute; top:320px; left: 88px; width: 185px; height: 89px;">
</textarea>
</div>
<div class="TComboBox" id="ComboBox2" style="position: absolute; top:328px; left: 296px; width: 145px; height: 21px;">
  <select name="ComboBox2">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d" selected="selected">d</option>
    <option value="e">e</option>
</select>
</div>
</fieldset>
</div>
<div class="TPanel" id="Panel2">
<fieldset style="position: absolute; top:32px; left:520px; width: 425px; height: 449px;">
<legend></legend>
<div class="TPanel" id="Panel3">
<fieldset style="position: absolute; top:64px; left:552px; width: 345px; height: 185px;">
<legend></legend>
<div class="TMemo" id="Memo2"><textarea name="Memo2" rows="8" cols="13" style="position: absolute; top:88px; left: 584px; width: 185px; height: 89px;">
You may wish to leave this memo emptyOr perpahaps give instructions aboout what should be written here</textarea>
</div>
<div class="TEdit" id="Edit1" style="position: absolute; top:200px; left: 600px; width: 121px; height: 21px;"><input type="text" name="Edit1"value="Insert text here"></div>
</fieldset>
</div>
<div class="TGroupBox" id="GroupBox3">
<fieldset style="position: absolute; top:272px; left:552px; width: 345px; height: 185px;">
<legend>GroupBox3</legend>
<div class="TPanel" id="Panel4">
<fieldset style="position: absolute; top:304px; left:584px; width: 177px; height: 137px;">
<legend></legend>
<div class="TRadioGroup" id="RadioGroup1">
<fieldset style="position: absolute; top:312px; left: 600px; width: 97px; height: 105px;"><legend>RadioGroup1</legend>

one: <input type="radio" name="RadioGroup1" value="one"><br>

two: <input type="radio" name="RadioGroup1" value="two" checked><br>

three: <input type="radio" name="RadioGroup1" value="three"><br>
</fieldset>
</div>
</fieldset>
</div>
<div class="TEdit" id="Edit2" style="position: absolute; top:320px; left: 776px; width: 105px; height: 21px;"><input type="text" name="Edit2"></div>
</fieldset>
</div>
</fieldset>
</div>
</form>
</body>
</html>
你能用更少的代码编写测试用例吗？ - Joe Phillips
请帮我解决这个问题：如何在基于ASP.NET的应用程序中使fieldset位置固定，根据可见性进行调整。 - Sachin
请帮我解决这个问题：http://stackoverflow.com/questions/33342144/how-to-make-fieldset-postion-fixed-in-asp-net-based-on-the-visibility - Sachin
请帮我解决这个问题：http://stackoverflow.com/q/33342144/4323579。 - Sachin
1个回答
5
“absolute”表示绝对，相对于最近的“相对定位(parent)”。一个相对定位的parent可以是一个有position:relative属性的元素或者是文档本身，如果不存在相对定位的parent。同时，将元素设置为绝对定位会产生一些影响，比如把它从文档流中移除。DOM将不会考虑这些绝对定位的元素，这意味着容器不会包含绝对定位的元素，也没有任何元素会被它们挤开。CSS定位可能看起来像黑魔法，直到你发现它遵循这些非常简单的规则——毫无例外！（这是件好事）。编辑：在此的具体操作取决于您想要实现什么目标。为什么首先使用绝对定位？绝对定位有最简单的规则，但也非常强大，而强大的工具也更难以使用，需要更多的手动操作，并且有更多的潜在风险。这是一个权衡。例如，如果一个元素变得更大而不移动其他元素以考虑到这一点，那么它们可能会重叠。绝对定位依赖于您保持每个元素的值成比例，以确保它们都正确对齐。如果您想要包装元素，则需要始终更新height和width属性，以确保它足够大，具有包装的外观。为了利用文档流提供的自动对齐、换行等功能，您可以使用浮动，margin和padding。基于我对您在这里尝试做什么的有限理解，我会将容器
的padding设置为反映子字段应该定位的位置，并为每个字段设置一个margin。对于应该放置在上一个字段右侧而非下一行的字段，使用float:left和clear:left。
1
另外，值得一提的是，如果您确实想要绝对定位（即相对于窗口的绝对定位），那么请使用position:fixed;。 - Anthony
1
相对定位、绝对定位和固定定位，都可以使用，但你的目标是什么？我看到你的代码为所有元素设置了绝对定位... 你能提供一张目标图像吗？因为我相信你可以用更少的 CSS 实现你想要的效果 :) - Zuul
我希望我可以将答案指定给一个评论，因为 position: fixed; 对我起作用了。我可以把它留在这里，但是我想问 Rex（谁得到了答案）... 1）我应该如何“正确”地做到这一点？ 我没有将任何元素标记为 position:relative，因此我的代码不应该像固定的一样显示吗？它没有。2）如果我将所有内容都标记为固定，我是否仍然会遇到换行问题？该如何最好地处理？也许将 fieldsets 标记为相对位置，其余的绝对位置？但是 - 嵌套字段集呢？ - Mawg says reinstate Monica
抱歉，我没有订阅任何图像共享服务，但是如果您将HTML中的绝对位置替换为“fixed”，它会非常接近我想要的效果。不过还有一些异常情况。 - Mawg says reinstate Monica
@mawg 我非常确定 fixed 不是你想要的，因为它相对于窗口而言是绝对定位，而不是文档，这意味着如果文档足够长以至于需要滚动，文档将会滚动但固定元素不会移动。 - Rex M
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接