定位格到另一格

-1

嗨，這一次的問題是與CSS的CSS問題，我有一個自定義對象，其中包含的項目（紅色矩形）（黑色矩形名爲container），每個項目必須包含一個叫做標誌的小方形（藍色）。直到這裏永恆的好。

這裏的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中完成的，它們都返回相同的結果。

Tests

什麼是當前的方式做到這一點？我的CSS有什麼不好的？

我使用絕對位置，因爲我需要用許多項目填充容器。還有一個替代方案來執行此任務？

非常感謝您的幫助。

來源

2012-03-13 Juan Pablo Gomez

上.Flag，刪除：

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

並將其更改爲：

bottom: 0; 
right: 0;

來源

2012-03-13 02:03:43 Joseph

很tks。爲你的幫助....它很好。 – 2012-03-13 02:41:07

約瑟夫是正確的，我只補充說，如果父母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; 
}

來源

2012-03-13 07:11:34 Tarun

定位格到另一格

回答

相關問題