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 和一个 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;
}