Question

我使用绝对位置来覆盖透明图像，但是我希望将图像置于其包含的div中，而不是在调整浏览器大小时与相邻的侧边栏重叠。我没有运气就做了很多搜索。相对于父div的位置似乎不起作用。

这是jsfiddle和代码： http://jsfiddle.net/Lp7kxot4/3/

HTML：

<div id="wrap">
    <div id="columnA">
    </div><!-- #columnA -->
    <div id="columnB">
        <div id="header">
            <h1>HEADER</h1>
        </div><!-- #header -->
        <div id="content">
            <img class="posAbs" src="http://i6.minus.com/jxIcIq7rF6ix4.jpg" />
            <span id="imageOverlay"><img class="posAbs" src="http://i.minus.com/ipkPzdUV85vpR.gif" /></span>
        </div><!-- #content -->
    </div><!-- #columnB -->
</div><!-- #wrap -->

CSS：

/* GLOBAL */
html,body,#wrap{height:100%;}
body{font-size: 62.5%;}

/* STRUCTURE */
#columnA{
    width:18em;
    height:100%;
    float:left;
}
#columnB{
    min-width:40em;
}
#content{
    position:relative;
}
.posAbs {
    position:absolute;
    left: calc( (100% + 18em) / 2);
    margin-right: -50%;
    transform: translate(-50%, 0)
}

Answer 1

我刚刚意识到提升#columnB的最小宽度可以解决问题

#columnB{
    min-width:58em;
}

不幸的是，由于某种原因，它无法在我正在处理的页面上运行，因此必须有其他内容使其无法正常工作。我想我必须孤立这个问题。这是对任何好奇的人的工作修复： http://jsfiddle.net/Lp7kxot4/4/

停止绝对定位元素与左列CSS重叠

1 个答案: