HTML / CSS：<fieldset>中元素的绝对定位
[英]HTML/CSS : absolute positioning of elements within <fieldset>
问题描述
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? 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>
1 个解决方案
解决方案1
5 已采纳 2010-06-04 00:51:23
"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. 相对父项是具有position：relative的元素，或者如果没有，则是文档。
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. DOM的布局就像绝对元素不存在一样。 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! CSS定位看起来像黑魔法，直到它被揭示它遵循这些非常简单的规则 - 没有例外！ (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 height and width properties to keep it large enough to have the appearance of wrapping. 如果你想要一个包装元素，它需要你总是更新height和width属性，以保持它足够大，以具有包装的外观。
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 fieldset to reflect where the child fields should be positioned and give each field a margin. 根据我有限的你正在尝试做的理解，我想置容器中的填充fieldset ，以反映儿童领域应定位，并给每个字段的余量。 For fields that should sit to the right of the previous instead of the next line, use float:left and clear:left . 对于应位于上一行而不是下一行右侧的字段，请使用float:left和clear:left 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.