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>

回答

相關問題