包含相同圖像的一半相等部分的行與 HTML 重疊 (Row with half equal section containing same image overlapped HTML)

問題描述

包含相同圖像的一半相等部分的行與 HTML 重疊 (Row with half equal section containing same image overlapped HTML)

我真的很想知道如何使用包括媒體查詢的 HTML CSS 來實現這種結構。見下圖：

在較小的屏幕上，第 1 部分將在頂部與第 2 部分包含的圖片的一小部分重疊。您必須看到上面的圖片才能理解我的問題。主要問題是我真的很想做這樣的事情，但我不知道從哪裡開始。我不想使用負邊距和填充來破壞任何 CSS 結構。

參考解法

方法 1:

Is this what you are after? Resize the browser window (make it smaller) to see the effect.

HTML:

<div id="section1">
    &nbsp;
</div>

<div id="section2">
    <div id="overlay">
        Overlay
    </div>
</div>

CSS:

#section1 {
    float: left;
    width: 50%;
    height: 200px;
    background: grey;
}

#section2 {
    width: 50%;
    height: 200px;
    background: black;
    float: right;
    position: relative;
}

#overlay {
    position: absolute;
    top: 90px;
    left: ‑20px;
    background: red;
}

@media screen and (max‑width: 480px) {
    #section1, #section2 {
        float: none;
    }
    #overlay {
        position: absolute;
        top: ‑10px;
        left: 90px;
        background: red;
    }
 }

JSFiddle

(by Robin、Madness)

參考文件

1. Row with half equal section containing same image overlapped HTML (CC BY‑SA 2.5/3.0/4.0)