I Have A Basic Problem Understanding CSS Positioning

November 07, 2022 Post a Comment

Edit: Ok, this is what works. It may not be 'right', but 1) it displays correctly & 2) it validates at W3C. It seems that I should make all positioning absoolute and add posit

Solution 1:

position: fixed means top:, right:, bottom:, and left: are relative to the browser window and the element doesn't scroll with the page.

position: relative means top:, right:, bottom:, and left: are relative to where the top, right, bottom, and left sides of the element would have been if there was no positioning. It also means any absolutely positioned child elements are placed relative to this element.

position: absolute means top:, right:, bottom:, and left: are relative to the sides of the nearest relatively positioned element that contains it. If it's not inside a relatively positioned element, position: absolute works the way most people expect at first: top:, right:, bottom:, and left: are relative to the edges of the page.

For what it looks like you're trying to do, I think you should position each element like this

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

where {X} and {Y} are replaced with the coordinates of the top left corner of the element as it appears in the form designer.

Solution 2:

Your problem is that absolute positioning is relative to the parent with absolute positioning. If the parent isn't absolutly position it will look up the tree utill it find absolutly positioned element or the body. Simply: make sure everything is absolutly positioned including The form and the divs.

Solution 3:

You can start with the following code. Make sure you read what others have posted:

Baca Juga

<!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>

Solution 4:

To help your understanding about CSS positioning: http://www.w3schools.com/css/css_positioning.asp

Solution 5:

I actually just ran into this problem. If a div is absolutely positioned and nested inside another div that is not absolutely positioned, it will be positioned relative to the parent div.

In your code, for example, Label1 is absolutely positioned, but it is inside Panel1, which is not absolutely positioned.

You can either make all levels of your div tree absolutely positioned, or you can use negative values to position things where you want them. Both can get messy if you aren't careful.

Html5 Tutorial