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

Question

绝对是绝对的还是不绝对的？

我正在尝试使用嵌套元素创建一个输入表单，每个元素包含其他元素，但它不能正确显示（根据屏幕标尺（和肉眼））。

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>

Answer 1

“绝对”是指绝对的，相对于他最近的“亲属”。 相对父项是具有position：relative的元素，或者如果没有，则是文档。

此外，使元素绝对具有某些含义，例如从文档流中删除它。 DOM的布局就像绝对元素不存在一样。 这意味着容器不会包裹绝对元素，并且没有元素会被它们推开。

CSS定位看起来像黑魔法，直到它被揭示它遵循这些非常简单的规则 - 没有例外！ （这是一件好事）

编辑：您在此处所做的具体细节取决于您要完成的任务。 你为什么一开始就使用绝对定位？ 绝对定位具有最简单的规则，但也非常强大，强大的工具也更加困难，需要更多的手动工作，并且它们有更多可能发生的坏事。 这是权衡。 例如，如果一个元素变大而不移动其他元素以将其考虑在内，则它们可能会重叠。 绝对定位取决于您在每个元素上按比例保持值，以确保它们都正确排列。 如果你想要一个包装元素，它需要你总是更新height和width属性，以保持它足够大，以具有包装的外观。

要利用文档流提供的内容 - 包装，自动对齐等 - 您可以使用浮动，边距和填充。 根据我有限的你正在尝试做的理解，我想置容器中的填充fieldset ，以反映儿童领域应定位，并给每个字段的余量。 对于应位于上一行而不是下一行右侧的字段，请使用float:left和clear:left 。

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

问题描述

1 个解决方案

解决方案1
5 已采纳 2010-06-04 00:51:23

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

问题描述

1 个解决方案

解决方案1 5 已采纳 2010-06-04 00:51:23

解决方案1
5 已采纳 2010-06-04 00:51:23