css - 并排框 : how to make one slide underneath?

Question

想象两个并排的盒子。 右侧向右浮动，宽度固定，包含一张照片，左侧包含文本，因此会填充容器左边缘的任何剩余宽度。

如果我调整(缩小)浏览器的大小，我希望左侧框中的文本是流畅的。好的到目前为止一切顺利...

这是困难的部分: 我需要左侧容器的最小宽度，因此当达到最小宽度时，文本框停止缩小，右侧照片框开始在左侧框下方滑动，直到消失。 这可能吗？

感谢任何帮助!

Answer 1

您可以通过定位实现 z-index 重叠，但不能通过 float 实现。你必须做这样的事情:

http://jsfiddle.net/jphB2/

代码和内联解释:

.leftbox {
    position: relative; /* stay sort of in the document flow */
    z-index: 2; /* be positioned at level 2 */
    min-width: 200px; /* minimum width at which to stop getting smaller */
    margin-right: 200px; /* catering for that right column */
    background-color: rgba(155, 155, 255, 0.8); /* slightly transparent so we can see the right box go 'underneath' it */
}

.rightbox {
    position: absolute; /* remove from the document flow */
    right: 0; /* sit where we want it to */
    top: 0; /* sit where we want it to */
    z-index: 1; /* be positioned at level 1, so below level 2 */
    width: 200px; /* set a width */
    background-color: rgba(255, 155, 155, 0.8); /* uhh, colours are nice */
}