Menu
I have a problem with relative positioning in Google Chrome The following code works fine in IE but not in Chrome. Relative positioning is relative to the normal position of an element. The normal postion of the red box is right under the black box. If I add a 10% space the red box should appear 10% under the normal position.
jsfiddle
Html
<body>
<div id="outer">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>
</body
Css
#outer
{
position:absolute;
left:20%;
right:20%;
bottom:20%;
top:20%;
background-color:Blue;
}
#inner1
{
position:relative;
width:20%;
height:20%;
background-color:Black;
}
#inner2
{
position:relative;
top:10%;
width:20%;
height:20%;
background-color:Red;
}
496
Relative Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Position Absolute: When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
Ok, just realized myself now, what the problem of this is:
see this jsfiddle, i just added
height: 60%
to the parent css.
62
For relative positioning to work the parent should have a size:
width: 100%;
height: 100%;
check the result in this fiddle
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
