web-dev-qa-db-ja.com

css相対配置が機能しないchrome

Googleでの相対位置に問題がありますChrome次のコードはIEでは正常に機能しますが、Chromeでは機能しません。相対位置は要素。赤いボックスの通常の位置は黒いボックスの真下です。10％のスペースを追加すると、赤いボックスは通常の位置の下に10％表示されます。

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; 
   }
htmlcsspositioning
9
user3120396

相対的な配置が機能するためには、親のサイズが次のようになります。

width: 100%;
height: 100%;

this fiddle で結果を確認してください

9
Wilt

さて、今自分自身に気づきました、これの問題は何ですか：

  • 最上位値の％は、常に親要素の高さを参照しています。高さを設定しなかったので、ゼロです。親要素に高さを設定すると、すべてが希望どおりに機能します...

これを参照してください jsfiddle 、私はちょうど追加しました

height: 60%

親のCSSに。

0
Kjell