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问题重叠图片

回答

相关问题