CSS:Div跨2个其他div [英] CSS: Div straddling 2 other divs

问题描述

我很好奇CSS是否有可能使<div>覆盖上方和下方的<div>，就像这样:

I'm curious whether it's possible with CSS to have a <div> overlaying the <div> above and below, like so:

我尝试使用margin-top: -40px;，但这似乎不起作用.我尝试position:relative;也没有任何运气.有什么想法吗?

I've tried to use margin-top: -40px;, but that doesn't seem to work. I've tried position:relative; without any luck, either. Any ideas?

谢谢！

推荐答案

可以！

诀窍是管理div的位置，然后为要重叠的div正确设置偏移量(顶部).

The trick is managing the positioning of your divs, then setting the offset (top) correctly for the div you want overlapping.

<div></div>
<div>
    <div></div>
</div>

CSS

div {
    width:100%;
    height:100px;
    position:relative; /* ensure the parent divs have a position set */
}
div:first-child {
    background:red;
}
div:last-child {
    background:blue;
}
div:last-child div {
    opacity:.5;
    height:50px;
    background:white;
    position:absolute; /* position relative to the parent */
    top:-25px; /* position the top to -25px (half its height) above the top of the parent */
}

这篇关于CSS:Div跨2个其他div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！