CSS問題重疊圖片

請參閱附件圖片，我想在html中設計，相當成功。但是當我在不同的分辨率下測試它時，紅色的盒子在這裏和那裏移動。我在100％的寬度和高度100％CSS問題重疊圖片

enter image description here

<style type="text/css"> 

    #green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; } 
    #blue-box { width: 25%; background: blue; float: left; height: 100%; } 
    #red-box { 
     position: relative; 
     top: 50px; 
     left:450px; 
     width: 357px; 
     background: red; 
     height: 207px; 
     margin:0 auto; 
    } 
    #green-box-content 
    { 
     margin:0 auto; 
     width:1600px; 
     height:800px; 


    } 
</style> 
<div id="container"> 

     <div id="green-box"> 
     <div id="green-box-content"> 
      <p>Here is some text!</p> 
      <div id="red-box"></div> 
     </div> 
     </div> 

     <div id="blue-box"> 

     </div> 

     <div style="clear: both"></div> 
    </div>

來源

2013-06-20 user2451541

部分問題是你如何試圖元素位置。它看起來像你想要它在藍色和綠色之間居中，但是你從左側定位。一旦綠色的寬度發生變化，它就不會在你想要的地方。從右側（兩者之間的邊界）定位並將right設置爲寬度的-1/2更好。

而且，如果父容器有一組高度

100％的高度，將只在這裏工作是修改CSS和fiddle to demonstrate

#blue-box, 
#green-box { 
    height: 300px; 
} 

#green-box { 
    position: relative; 
    width: 75%; 
    float: left; 

    background: green; 
} 
#blue-box { 
    width: 25%; 
    float: left; 

    background: blue; 
} 
#red-box { 
    position: absolute; 
    top: 50px; 
    right: -178px; /* width/2 */ 

    width: 357px; 
    height: 207px; 

    background: red; 
}

來源

2013-06-20 13:26:16

Best，Thanks.Thats我缺少的東西 – user2451541

但是，如果我將藍色和綠色框的高度延伸到100％，紅色框消失 – user2451541

我需要知道其周圍的代碼的其餘部分以幫助，因爲設置高度到100％取決於聲明高度的父元素。瞭解您正在查看的瀏覽器也是有幫助的。 –

從#green-box-content刪除width和height，完全在我的地方。

#green-box-content 
    { 
     margin:0 auto; 
    }

在我的本地進行更改後檢查此 screenshot 。

來源

2013-06-20 13:21:07 Praveen

試放大/縮小盒子肯定會移動 – user2451541

-1

我認爲你應該紅色框的百分比，因爲你已經將它用於綠色和藍色，並且位置是絕對的。

http://jsfiddle.net/ccEKk/

如果我錯了更新的小提琴，從而使他人能夠幫助你用它

#red-box { 
     position: absolute; 
     top: 5%; 
     left:45%; 
     width: 35%; 
     background: red; 
     height: 20%; 
     margin:0 auto; 
    }

來源

2013-06-20 13:24:16 Uma

你小提琴壞了。 – Praveen

CSS問題重疊圖片

回答

相關問題