HTML/CSS ：
“绝对”究竟是绝对还是非绝对？
我正在尝试制作一个带有嵌套元素的输入表单，每个元素都包含其他元素，但它无法正确显示（根据屏幕标尺（和肉眼））。
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>
Is "absolute" absolute or not?
I am trying to make an input form with nested elements, each containing other elements, but it does not display correctly (according to a screen ruler (and the naked eye)).
The HTML is valid, so is this a case of "well, it's absolute, but only relative to it's containing folder" or some such?
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
“绝对”是指绝对的，相对于最近的“相对父母”。相对父元素可以是具有position:relative 的元素，也可以是文档（如果没有）。
此外，使元素成为绝对元素具有某些含义，例如将其从文档流中删除。 DOM 的布局将如同绝对元素不存在一样。这意味着容器不会环绕绝对元素，并且不会将任何元素推开。
CSS 定位看起来就像黑魔法，直到人们发现它遵循这些非常简单的规则 - 没有例外！ （这是一件好事）
编辑：
您在这里所做的具体操作取决于您想要完成的任务。你为什么首先使用绝对定位？绝对定位的规则最简单，但也非常强大，而强大的工具也更难，需要更多的手动工作，而且更有可能发生不好的事情。这就是权衡。例如，如果一个元素变大而没有移动其他元素来考虑这一点，它们可能会重叠。绝对定位取决于您在每个元素上保持值的比例，以确保它们都正确排列。如果您想要一个环绕元素，则需要始终更新
height和width属性，以保持其足够大以具有环绕的外观。要利用文档流提供的功能（换行、自动对齐等），您可以使用浮动、边距和填充。基于我对您在此处尝试执行的操作的有限理解，我将设置容器
fieldset的填充以反映子字段应放置的位置并为每个字段提供边距。对于应位于上一行右侧而不是下一行右侧的字段，请使用float:left和clear:left。"absolute" means absolute, relative to he nearest "relative parent". A relative parent is either an element with position:relative or, if there isn't one, the document.
Additionally, making an element absolute has certain implications, like removing it from document flow. The DOM will be laid out as if the absolute elements do not exist. This means containers will not wrap around absolute elements and no elements will be pushed out of the way by them.
CSS positioning can seem like black magic until it is revealed that it follows these very simple rules - no exceptions! (which is a good thing)
Edit:
The specifics of what you do here depend on what you are trying to accomplish. Why are you using absolute positioning in the first place? Absolute positioning has the simplest rules, but is also very powerful, and powerful tools are also a lot harder and require a lot more manual work, and they have more potential for bad things to happen. That's the trade-off. For example, if one element grows larger without moving the other ones to take that into account, they could overlap. Absolute positioning depends on you keeping values in proportion on each element to make sure they are all lined up correctly. And if you want a wrapping element, it requires that you always update the
heightandwidthproperties to keep it large enough to have the appearance of wrapping.To take advantage of what document flow provides - wrapping, automatic alignment, etc - you can use floating, margins and padding. Based on my limited understanding of what you are trying to do here, I would set the padding of the container
fieldsetto reflect where the child fields should be positioned and give each field a margin. For fields that should sit to the right of the previous instead of the next line, usefloat:leftandclear:left.