css - 两列布局，左列“在”右列上

我正在尝试模仿此图像：



（original image page）

从左列到右列有阴影效果，通常我使用仿列方法并将背景放在容器上，但在这种情况下，左列应在右列上方。

编辑：我现在已经根据您的回答对此进行了设置，但是侧栏上的背景并没有停留在容器的高度（它溢出到页面底部）。

#map-app {
    height: 100%;
    min-height: 650px;

    width: 1200px;
    margin: 30px auto;
    background-color: #FFFFFF;

    .sidebar {
        background-image: url('/data/images/map/v2/sidebar_separator.png');
        background-position: top right;
        background-repeat: repeat-y;

        position: absolute;
        height: 100%;
        width: 350px;
        z-index: 9999;
    }

    .content-container {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 9998;
    }
}

看起来像这样：




关于如何实现此目标的任何建议？

最佳答案

如果要确保左列位于右上方，请明显使用z-index元素，并为左列的右边框提供阴影效果。这样一来，您可以使用z-index设置左侧列在右侧上方的堆叠顺序，从而完全在右侧列中填充页面，在左侧列中填充一半。如果您至少不会显示自己所拥有的代码段，则不会为您显示任何代码。有点毫无意义。

更新：您显然必须使用position：absolute;对于两列，为了实现此目的，如果将其设置为相对，浏览器将不允许它们重叠。

更新：如果您希望将两列都拉伸到浏览器的高度，则显然您会对两者使用相同的容器并将其设置为height: 100%;容器，左列和右列的问题是，您可以将容器设置为100％的高度，但这只是使您放入其中的内容物的高度为100％，并不意味着内容物的大小也恰好为100％。我建议做的是将容器代码更改为height: 100%; width: 100%;，并且只设置一个<div class="container"></div>

代码更新：

.container {
    height: 100%; width: 100%;
}

.leftcolumn { // Guessing this would be your .sidebar
    overflow: hidden; // Option 1: Set the overflow to hidden.
    position: absolute;
    height: 100%; width: 50%; // Option 2: Set the height slightly lower. like 99%
    z-index: 9999; // Higher than right.
}

.rightcolumn {
    position: absolute;
    height: 100%; width: 100%;
    z-index: 9998; // Lower than left.
}

关于css - 两列布局，左列“在”右列上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19482219/