CSS问题将div定位到另一个div中

Question

嗨再次，这次问题是用css，我有一个自定义对象（黑色矩形命名为容器），其中包含项目（红色矩形），每个项目必须包含一个名为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>

问题是，当尺寸宽度大于高度时，标志出现在Item之外，如图像A，如果高度大于宽度，则它显示为图像B.项目可能有不同的大小，测试是在Firefox 10.0.2，chromre 17.0.963.79m和IE 9中，所有这些都返回相同的结果。

目前的做法是什么？我的CSS有什么不好的吗？

我正在使用绝对位置，因为我需要使用许多项填充Container。 有替代方法可以执行此任务吗？

非常感谢您的帮助。

Answer 1

在.Flag上，删除：

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