css relative positioning not working in chrome

html css positioning
user3120396 picture user3120396 · Dec 20, 2013 · Viewed 22.8k times · Source

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; 
   }

Answer

Wilt picture Wilt · Dec 20, 2013

For relative positioning to work the parent should have a size:

width: 100%;
height: 100%;

check the result in this fiddle

Related questions

Position an element relative to its container

I'm trying to create a horizontal 100% stacked bar graph using HTML and CSS. I'd like to create the bars using DIVs with background colors and percentage widths depending on the values I want to graph. I also want to have …

Read More
How to make a HTML list appear horizontally instead of vertically using CSS only?

I need this because I want to make a menu (which is made from a HTML list) appear horizontally. I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page. …

Read More
CSS position:fixed inside a positioned element

I have a positioned div whose content can be too long so scrollbars appear (overflow:auto set). It functions as a dialog box in an ajax app. I want to fix a close button on it's right top corner so …

Read More