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

Question

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

我很难用语言解释我想要什么，所以我想一张图片会更清楚：

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

有智慧的人吗？

Answer 1

工作小提琴

你可以看到我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;
}

但这只有在父元素不在页面的最左边或最右边时才有效。