html - CSS 问题重叠图像

Question

请看附图，我想用 html 设计这个，非常成功。但是当我在不同的分辨率上测试它时，红色框会到处移动。我的设计是 100% 宽度和 100% 高度

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

Answer 1

部分问题在于您如何尝试定位元素。看起来您希望它位于蓝色和绿色之间的中心，但您是从左侧定位的。一旦绿色的宽度发生变化，它就不会出现在您想要的位置。最好从右侧（两者之间的边界）定位并设置right为宽度的-1/2。

此外，仅当父容器具有设定高度时，100% 高度才有效

这是修改后的 CSS，以及演示的小提琴

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

Answer 2

Remove widthand heightfrom #green-box-content，在我的本地完美运行。

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

在我的本地进行更改后检查此项。

Answer 3

我认为您应该将红色框的百分比用于绿色和蓝色，并将其定位为绝对值。

http://jsfiddle.net/ccEKk/

如果我错了，请更新小提琴，以便有人可以帮助您

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