代码之家 › 专栏 › 技术社区 › Mawg says reinstate Monica

我有一个基本的问题理解CSS定位

css html

Mawg says reinstate Monica · 技术社区 · 14 年前

编辑:好的,这是有效的。可能不是“正确”,但1)显示正确&2) 它在W3C验证。似乎我应该使所有的定位都是绝对的,并将定位添加到所有div中,除了那些有字段集的div,在那里我必须将位置添加到字段集。如果你认为我错了,请随意改正,但是“它对我有用”!耶!哎呀!最后!感谢所有帮助过我的人。

我正在使用borlanddelphi生成一个HTML表单生成器。用户可以拖动;删除组件生成一个文件,当他高兴的时候,他可以生成HTML(我在他的表单末尾弹出一个Submit按钮)。

position: fixed ,但这看起来不对,也不是绝对的。

我做错什么了(HTML在W3C上验证)

下面是在Delphi程序中设计表单时看到的一个非常基本的示例
alt text

alt text

再加上绝对位置 alt text

最后,这里是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显示像德尔福截图。

8 回复 | 直到 7 年前

Anax 14 年前

您可以从以下代码开始。确保阅读其他人发布的内容:

<!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="">
            <legend>GroupBox1</legend>
            <div class="TPanel" id="Panel1">
                <fieldset style="width: 600px; height: 250px; margin: 20px 50px 50px 20px; padding: 20px; padding-left: 50px">
                    <div class="TLabel" id="Label1" style="position: absolute; left: 100px; top: 100px;">Label1</div>
                    <div class="TEdit" id="Edit1" style="position: absolute; left: 200px; top: 100px;"><input type="text" name="Edit1" value="an edit bx"></div>
                    <div class="TCheckBox" id="CheckBox1" style="position: absolute; left: 400px; top: 100px;">CheckBox1 <input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div>
                    <div class="TComboBox" id="ComboBox1" style="position: absolute; left: 100px; top: 150px;">
                        <select size ="1" name="ComboBox1" style="width: 200px;">
                            <option value="one" selected="selected">one</option>
                            <option value="two">two</option>
                            <option value="three">three</option>
                        </select>
                    </div>
                    <div class="TRadioGroup" id="RadioGroup1" style="position: absolute; left: 380px; top: 150px;">
                        <fieldset style="">
                            <legend>RadioGroup1</legend>
                                <input type="radio" name="RadioGroup1" value=""> red<br>
                                <input type="radio" name="RadioGroup1" value="" checked> white<br>
                                <input type="radio" name="RadioGroup1" value=""> blue<br>
                        </fieldset>
                    </div>
                </fieldset>
            </div>
        </fieldset>
    </div>
    <div><input type="submit" name="submitButton" value="Submit" style=""></div>
</form>
</body>
</html>

Patrick McElhaney 14 年前

position: fixed 方法 top: , right: , bottom: left: 相对于浏览器窗口,元素不会随页面滚动。

position: relative 顶部: , 正确的: , 底部: ,和 左: 会是的 如果没有定位。它也表示相对于此元素放置任何绝对定位的子元素。

position: absolute 方法 顶部: 正确的: , 底部: 左: 相对于包含它的最近相对定位元素的边。如果它不在相对位置的元素中, 位置:绝对 按照大多数人最初期望的方式工作: 顶部: , 正确的: , 底部: 左: 相对于页面的边缘。

对于你想做的事情,我认为你应该这样定位每个元素

<div style="position: absolute; left: {X}px; top: {Y}px">

Daniel 14 年前

您的问题是绝对定位是相对于具有绝对定位的父对象的。如果父对象不是绝对位置,它将查找树,直到找到绝对位置的元素或主体。

Jeaf Gilbert 14 年前

为了帮助您理解CSS定位: http://www.w3schools.com/css/css_positioning.asp

cstack 14 年前

实际上我遇到了这个问题。如果一个div是绝对定位的,并且嵌套在另一个不是绝对定位的div中,那么它将相对于父div定位。

Label1 是绝对的位置,但它在里面 Panel1 ,这不是绝对的定位。

melhosseiny 14 年前

我认为问题在于 top 和 left 你给了嵌套的绝对定位元素。

here . 玩弄价值观,亲眼看看。

编辑:我试图计算正确的值,它不是完美的,因为我没有从delphi程序的值,你正在使用的值不是delphi程序给出的值,从你的代码和屏幕截图可以明显看出。看到结果了吗 here

BrunoLM 14 年前

只是设置 position 绝对是不够的,基本上是固定的立场,你只需发挥 left 和 top

下面是固定的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:10px; left:10px; width: 753px; height: 369px;">
<div class="TLabel" id="Label1" style="position: absolute; top:35px; left: 80px; width: 32px; height: 13px;">Label1</div>
<div class="TEdit" id="Edit1" style="position: absolute; top:35px; left: 200px; width: 121px; height: 21px;"><input type="text" name="Edit1" value="an edit bx"></div>
<div class="TCheckBox" id="CheckBox1" style="position: absolute; top:35px; left: 420px; width: 97px; height: 17px;"><input type="checkbox" name="CheckBox1" value="CheckBox1Checked"> CheckBox1</div>
<div class="TComboBox" id="ComboBox1" style="position: absolute; top:145px; left: 80px; 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:145px; left: 250px; 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:28px; left: 50%;"></div>
</form>
</body>
</html>

-1

agentfll 14 年前