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

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

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>

来源

2010-06-04 Mawg

你可以用少代码做一个测试用例吗？ – 2010-06-04 01:05:00

http://stackoverflow.com/questions/33342144/how-to-make-fieldset-postion-fixed-in-asp-net-based-on-the-visibility Plz帮助我在这 – Sachin 2015-10-26 09:19:00

Plz帮助我在这个HTTP ：//stackoverflow.com/questions/33342144/how-to-make-fieldset-postion-fixed-in-asp-net-based-on-the-visibility – Sachin 2015-10-26 09:21:51

“绝对”是指绝对的，相对于他最近的“相对父母”。相对父项是位置为：relative的元素，如果没有，则为文档。

此外，使元素绝对具有一定的含义，如将其从文档流中移除。 DOM将按照绝对元素不存在的方式进行布局。这意味着容器不会环绕绝对元素，也不会将元素排除在外。

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

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

要利用文档流提供的功能 - 包装，自动对齐等 - 您可以使用浮动，边距和填充。根据我对这里所要做的事情的有限理解，我将设置容器的填充以反映儿童场的位置，并为每个场赋予余量。对于应位于前一行而不是下一行的字段，请使用float:left和clear:left。

来源

2010-06-04 00:51:23

另外，不妨提一下，如果你确实想要绝对定位（就像在绝对的窗口中），那么使用'position：fixed;' – Anthony 2010-06-04 00:59:17

+1：良好的洞察力。谢谢！ – DavidR 2010-06-04 01:03:31

相对的，绝对的和固定的，这都很好，但你的目标是什么？我发现你的代码对所有元素都是绝对的......你能提供一个你的目标的图像吗？因为我相信你可以用很少的css得到你想要的东西:) – Zuul 2010-06-04 01:37:26

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

回答

相关问题