我有一个理解CSS定位的基本问题
编辑:好的,这是有效的.它可能不是"正确",但1)它正确显示&2)它在W3C验证.似乎我应该使所有定位绝对并为所有div添加定位,除了那些带有fieldset的地方,我必须将位置添加到fieldset.如果你认为我错了,请随意纠正这个,但"它对我有用"!好极了!Yipee!最后!全面+1,感谢所有帮助过的人.
编辑:赏金给任何人发布编辑的HTML,显示像Delphi截图.
我正在使用Borland Delphi生成HTML表单生成器.用户可以拖放组件以生成文件,当他开心时,他可以生成HTML(我在表单的末尾弹出一个提交按钮).
因为我在生成时具有每个控件的绝对位置,所以我想在CSS中指定绝对位置.我认为这意味着我必须使用position: fixed,但这看起来不对,也不是绝对的.
我究竟做错了什么？(HTML在W3C验证)
这是在Delphi程序中设计表单时看到的一个非常基本的基本示例
这里是MSIE 8(有固定位置)
再次以绝对的位置
最后,这是HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Input data</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="http://localhost/a_submitted.php" method="post">
<div class="TGroupBox" id="GroupBox1">
<fieldset style="position: absolute; top:40px; left:40px; width: 857px; height: 441px;">
<legend>GroupBox1</legend>
<div class="TPanel" id="Panel1">
<fieldset style="position: absolute; top:64px; left:56px; width: 753px; height: 369px;">
<legend></legend>
<div class="TLabel" id="Label1" style="position: absolute; top:88px; left: 80px; width: 32px; height: 13px;">Label1</div>
<div class="TEdit" id="Edit1" style="position: absolute; top:80px; left: 72px; width: 121px; height: 21px;"><input type="text" name="Edit1" value="an edit bx"></div>
<div class="TCheckBox" id="CheckBox1" style="position: absolute; top:88px; left: 80px; width: 97px; height: 17px;">CheckBox1<input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div>
<div class="TComboBox" id="ComboBox1" style="position: absolute; top:145px; left: 137px; width: 145px; height: 21px;">
<select size ="1" name="ComboBox1">
<option value="one" selected="selected">one </option>
<option value="two">two </option>
<option value="three">three </option>
</select>
</div>
<div class="TRadioGroup" id="RadioGroup1">
<fieldset style="position: absolute; top:144px; left: 136px; width: 185px; height: 105px;"><legend>RadioGroup1</legend>
red: <input type="radio" name="RadioGroup1" value=""><br>
white: <input type="radio" name="RadioGroup1" value="" checked><br>
blue: <input type="radio" name="RadioGroup1" value=""><br>
</fieldset>
</div>
</fieldset>
</div>
</fieldset>
</div>
<div><input type="submit" name="submitButton" value="Submit" style="position:relative; top:25px; left: 50%;"></div>
</form>
</body>
</html>
编辑:赏金给任何人发布编辑的HTML,显示像Delphi截图.
编辑:好的,这是有效的.它可能不是"正确",但1)它正确显示&2)它在W3C验证.似乎我应该使所有定位绝对并为所有div添加定位,除了那些带有fieldset的地方,我必须将位置添加到fieldset.如果你认为我错了,请随意纠正这个,但"它对我有用"!好极了!Yipee!最后!全面+1,感谢所有帮助过的人.
position: fixed表示top:,, right:和bottom:,并且left:相对于浏览器窗口,元素不随页面滚动.
position: relative手段top:,right:,bottom:,和left:相对于其中的元素上,右,下,左两侧本来如果没有定位.它也指任何绝对定位的子元素都相对于该元件放置.
position: absolute是指top:,right:和bottom:,和left:相对于包含它的最近的相对定位元素的侧面.如果它不是一个相对定位元素中,position: absolute工作方式多数人期望在第一:top:,right:,bottom:,和left:相对于页面的边缘.
对于你想要做的事情,我认为你应该像这样定位每个元素
<div style="position: absolute; left: {X}px; top: {Y}px">
其中{X}和{Y}被替换为元素左上角的坐标,因为它出现在表单设计器中.