I Have A Basic Problem Understanding Css Positioning
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
<divstyle="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:
<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Input data</title><metahttp-equiv="Content-type"content="text/html;charset=UTF-8"></head><body><formaction="http://localhost/a_submitted.php"method="post"><divclass="TGroupBox"id="GroupBox1"><fieldsetstyle=""><legend>GroupBox1</legend><divclass="TPanel"id="Panel1"><fieldsetstyle="width: 600px; height: 250px; margin: 20px 50px 50px 20px; padding: 20px; padding-left: 50px"><divclass="TLabel"id="Label1"style="position: absolute; left: 100px; top: 100px;">Label1</div><divclass="TEdit"id="Edit1"style="position: absolute; left: 200px; top: 100px;"><inputtype="text"name="Edit1"value="an edit bx"></div><divclass="TCheckBox"id="CheckBox1"style="position: absolute; left: 400px; top: 100px;">CheckBox1 <inputtype="checkbox"name="CheckBox1"value="CheckBox1Checked"></div><divclass="TComboBox"id="ComboBox1"style="position: absolute; left: 100px; top: 150px;"><selectsize ="1"name="ComboBox1"style="width: 200px;"><optionvalue="one"selected="selected">one</option><optionvalue="two">two</option><optionvalue="three">three</option></select></div><divclass="TRadioGroup"id="RadioGroup1"style="position: absolute; left: 380px; top: 150px;"><fieldsetstyle=""><legend>RadioGroup1</legend><inputtype="radio"name="RadioGroup1"value=""> red<br><inputtype="radio"name="RadioGroup1"value=""checked> white<br><inputtype="radio"name="RadioGroup1"value=""> blue<br></fieldset></div></fieldset></div></fieldset></div><div><inputtype="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.
Post a Comment for "I Have A Basic Problem Understanding Css Positioning"