CSSの問題位置決めdivの別のdiv

Question

こんにちはに再び、問題はCSSであり、この時間は、私は」の項目が含まれているカスタムオブジェクト（containerという名前の黒い長方形）（赤枠）を持って、各項目が含まれている必要がありますflagという名前のlitle矩形（青色）。ここまでは大丈夫です。ここ

は、CSSプロパティです：

.container 
{ 
    overflow:visible; 
    position:absolute; 
    border:0px solid; 
    border-color:Black; 
    width:500px; 
    height:500px; 
} 
.Item 
{ 
overflow:visible; 
border:0 invisible; 
position:absolute; 
z-index:100; 
margin-top:1px; 
} 

.Flag 
{ 
position:absolute; 
width:20%; 
height:20%; 
margin-left:80%; 
margin-top:80%; 
z-index:98; 
opacity: 0.5; 
} 

そして、ここでは私のHTMLは

<div class="Container" id="CondicionesMostrar" style="left: 0.31em; top: 0.31em; width: 84.75em; height: 44em;"> 
    <div class="Item" id="I_Cond_1" style="left: 0.06em; top: 0.06em; width: 216px; height: 120px; border-width:thick; background-color:Black;" onclick="alert(Hello');"> 
     <div class="Flag"></div> 
    </div> 
</div> 

ある問題はサイズの幅が高さよりも大きい場合にフラグが画像Aのような項目のうち、表示されています高さが幅より大きい場合、画像Bとして表示されます。アイテムのサイズが異なる可能性があります。Firefox 10.0.2、chromre 17.0.963.79m、IE 9でテストが行​​われ、すべて同じ結果を返します。

これを行うには、現在の方法は何ですか？私のCSSに何か悪いですか？

コンテナに多数のアイテムを設定する必要があるため、絶対位置を使用しています。 このタスクを実行する代替手段はありますか？

非常に助かります。 .Flag上

Answer 1

、削除：

margin-left:80%; 
margin-top:80%; 

をし、それを変更します。

bottom: 0; 
right: 0; 

Answer 2

ヨセフは、私が唯一の親のdivあなたにも左と上の位置を使用する必要がある場合と付け加えています、右です。

.container 
{ 
    position:relative; 
    border:1px solid #000; 
    width:500px; 
    height:500px; 
} 
.Item 
{ 
position:absolute; 
z-index:100; 
top:1px; 
left: 0; 
} 

.Flag 
{ 
position:absolute; 
width:20%; 
height:20%; 
right:0; 
bottom:0; 
z-index:98; 
opacity: 0.5; 
}