Question

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

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>

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

Answer 2

从width移除height和#green-box-content，在我当地完美运作。

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

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

Answer 3

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

http://jsfiddle.net/ccEKk/

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

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

CSS问题重叠图像

3 个答案: