HTML / CSS: абсолютное позиционирование элементов в пределах <fieldset> - PullRequest
3 голосов
/ 04 июня 2010

«Абсолютный» абсолют или нет?

Я пытаюсь создать форму ввода с вложенными элементами, каждый из которых содержит другие элементы, но она не отображается правильно (в соответствии с линейкой экрана (и невооруженным глазом)).

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 Ответ

5 голосов
/ 04 июня 2010

«абсолютный» означает абсолютный относительно ближайшего «относительного родителя». Относительный родитель - это либо элемент с позицией: относительный, либо, если его нет, документ.

Кроме того, создание абсолютного элемента имеет определенные последствия, например удаление его из потока документов. DOM будет выложен так, как если бы абсолютные элементы не существовали. Это означает, что контейнеры не будут обтекать абсолютные элементы и никакие элементы не будут вытеснены ими.

Позиционирование CSS может показаться черной магией, пока не будет обнаружено, что оно следует этим очень простым правилам - без исключений! (что хорошо)

Редактировать : Специфика того, что вы здесь делаете, зависит от того, чего вы пытаетесь достичь. Почему вы используете абсолютное позиционирование? Абсолютное позиционирование имеет самые простые правила, но оно также очень мощное, а мощные инструменты также намного сложнее и требуют гораздо больше ручной работы, и у них больше шансов на то, что могут случиться плохие вещи. Это компромисс. Например, если один элемент увеличивается, не перемещая другие, чтобы принять это во внимание, они могут перекрываться. Абсолютное позиционирование зависит от того, сохраняете ли вы значения пропорционально для каждого элемента, чтобы убедиться, что все они выстроены правильно. И если вам нужен элемент обтекания, он требует, чтобы вы всегда обновляли свойства height и width, чтобы он был достаточно большим, чтобы иметь вид обтекания.

Чтобы воспользоваться преимуществами потока документов - обтеканием, автоматическим выравниванием и т. Д. - вы можете использовать плавающие поля, поля и отступы. Исходя из моего ограниченного понимания того, что вы пытаетесь сделать здесь, я бы установил отступ контейнера fieldset, чтобы отразить, где должны быть расположены дочерние поля, и дал каждому полю поле. Для полей, которые должны располагаться справа от предыдущей, а не следующей строки, используйте float:left и clear:left.

...