具有内容移出容器的菜单的垂直背景

Question

我想知道在CSS + HTML中实现下图的最佳方法。

我很难用文字解释我想要的东西，所以我猜一张照片会让它更清晰：

虽然第二和第三部分是可行的。我很想知道实现第一个的最佳方法（蓝色菜单）。如果我将页面分成三个部分（基于菜单），在蓝色的情况下，我的div项目必须浮出菜单的水平宽度，但在垂直方向内。

明智的想法？

Answer 1

Working Fiddle

您可以看到我在父级上使用position:relative，在子级上使用position:absolute，以使其从li元素中流出。

ul {
    list-style:none;
    width:906px;
    height:600px;
}
li {
    float:left;
    display:inline-block;
    border:1px solid #ccc;
    width:300px;
    height:600px;
    text-align:center;
    position:relative;
}
.selected {
    background:yellow;
}
.div {
    position:absolute;
    left:-150px;
    width:600px;
    height:80px;
    border:1px solid #000;
    background:#fff;
    z-index:2;
}
#div-1 {
    top:30px;
}
#div-2 {
    top:140px;
}
#div-3 {
    top:250px;
}

Answer 2

你可以按位置：绝对。

.blueDiv{
    position:relative; 
}
.innerDiv{
    position:absolute; 
    top: (your choice);
    left: 50%;
    margin-left: -(innerDivSize / 2);
}

如果您没有内部元素的宽度......您可以尝试通过以下方式将它们向左和向右推：

.innerDiv{
    position:absolute; 
    top: (your choice);
    left: 0;
    right: 0;
}

但是只有在父元素不在页面的左侧或右侧时才会起作用。