レスポンシブ画像と文字の重なり解除

Question

前提・実現したいこと

画面の幅を変えたときに、重なっていた画像と文字の重なりを解除したい。
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1591182041_YTU3NzBhMWNiMjQ4
Airbnbの模写です。全画面表示だと画像と文字が重なっているのですが、画面幅を小さくしていくと画像の下に文字や、テキストボックスが来るようになっています。このようにしたいです。

発生している問題・エラーメッセージ

画面幅を変えても画像と文字が重なっている。

該当のソースコード

<header>
        <div class="container">
            <div class="wrapper">
                <ul class="nav">
                    <img src="images/140717newairbnblogo.jpg">
                    <li><a href="#">概要</a></li>
                    <li><a href="#">準備</a></li>
                    <li><a href="#">安全</a></li>
                    <li><a href="#">マネープラン</a></li>       
                </ul>
            </div>
            <div class="green">
            <button class="btn" type="button" onclick="location.href='移動先のファイルのパスを書く'">はじめる</button>
            </div>
        </div>
    </header>
        <div class="back-img">
            
            <div class="text-background">
                <div class="text">
                    <section>
                        <h1 class="host">Airbnbホストになって、暮らしをレベルアップ</h1>
                       
                    </section>
                    <div class="iojo">
                        <p class="stay">宿泊施設の内容を記述</p>
                        <input type="text" class="address" value="大阪" size="35">
                        <select name="name" class="plan">
                        
                        <option value="enteir_home">まるまる貸切</option>
                        <option value="private_room">個室</option>
                        <option value="share_room">シェアルーム</option>
                    </select> 
                    <select name="many-peron" class="person">
                        <option value="guest1">ゲスト１</option>
                        <option value="guest2">ゲスト２</option>
                        <option value="guest3">ゲスト３</option>
                        
                    </select>
                        <button class="btn2" type="button" onclick="location.href='移動先のファイルのパスを書く'">はじめる</button>
                    </div>
                </div>
            </div>
        </div>

header {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 12%;
    border-bottom: 1px solid grey;
    background-color: white;
}
div.container {
    margin-left: -15px;
    
}
/*左上の画像のフォント*/
img {
    height: 40px;
    width: 80px;
    margin-top: 30px;
}


/*概要とかのところ*/
li a {
    margin: -3em 0;
    padding: 5em 1em;
    display :block;
    color:rgba(0, 255, 196, 1);
}
/*ボタンのところ*/
div.green {
    display: block;
    margin: 0 0 0 auto;
}
.btn{
    border-radius: 5px;
    background-color: green;
    padding-top: 10px;
    padding-bottom: 30px;
    text-align: center;
    color: white;
    position: absolute;
    right: 30px;
    top: 30px;
  }




/*背景画像のところ*/
.back-img {
    width: 100%;
    background-image:url('https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=n:ope,e:fjpeg-c75');
    background-size: cover;
    /*position: absolute;*/
    overflow: hidden;
    margin-bottom: 50px;
    margin-top: 100px;
 
}

.host {
    font-size: 40px;
    margin-left: 40px;
    margin-right: 40px;
    padding: 10px;
    font-weight: bold;
    margin-top: 10px;
}

.stay {
    margin-left: 50px;
    font-weight: bolder;
    border-style: initial;
}

.address {
    margin-left: 50px;
    margin-bottom: 20px;
    border-radius: 10pxpx;
}
.plan {
    margin-left: 50px;
    border: ;
    width: 40%;
    height: 50px;
}
.person {
    margin-left: 20px;
    border: ;
    width: 30%;
    height: 50px;
}
.text-background {
    background-color: white;
    float: right;
    max-width: 460px;
    margin:78px 92px
}

@media screen and ( max-width:479px ) 
{
    .text-background{
        width: 83.33%;
        float: left;
        background-color: transparent!important;
    }

   .green {
       display: none!important;
   }

Comments

[Lhankor_Mhy]

元ページ見てきましたが、JavaScriptを使っているんじゃないでしょうか？

[ryouk]

本当ですか。
それは勉強しないとですね。
わざわざありがとうございます。

Answer 1

補足依頼欄にも書いた通り、模写元はJavaScriptを使いHTML構造を変更することによって実現していますが、CSSで類似のことをするならば、display: contentsを使ってみるといいかもしれません。
このルールは、その要素をなかったことにします。

サンプル

@media screen and ( max-width:479px ) 
{
    .text-background, .back-img{
        display: contents;
    }
    .text > section {
        width: 100%;
        background-image:url('https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=n:ope,e:fjpeg-c75');
        background-size: cover;
        /*position: absolute;*/
        overflow: hidden;
        margin-bottom: 50px;
        margin-top: 100px;

    }

   .green {
       display: none!important;
   }

参考：
<display-box> - CSS: カスケーディングスタイルシート | MDN

---

または、all: unsetという方法もあるかもしれません。
このルールは、その要素のルールを全てリセットします。

サンプル

@media screen and ( max-width:479px ) 
{
    .text-background, .back-img{
        all: unset;
    }
    .text > section {
        width: 100%;
        background-image:url('https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=n:ope,e:fjpeg-c75');
        background-size: cover;
        /*position: absolute;*/
        overflow: hidden;
        margin-bottom: 50px;
        margin-top: 100px;

    }

   .green {
       display: none!important;
   }

参考：
all - CSS: カスケーディングスタイルシート | MDN

---

個人的には、後者はユーザーエージェントのデフォルトCSSまでリセットしてしまうので副作用が大きいと思いますから、前者をおすすめします。
all: revertが使えるなら後者がいいと思うのですが……

Comments

[ryouk]

やってもたのですが、display: contents;だけ反映されないのはなぜでしょうか？

[Lhankor_Mhy]

「display: contents;だけ反映されない」というのは、何が起きていますか？
それは回答でご提示したサンプルページで「重なり解除」ができていない、ということですか？

[ryouk]

背景の上に、同じ背景が表示され、背景が二枚重なっている状態になっています。

[Lhankor_Mhy]

それは私が見ているものと違いますね。
環境の問題でしょうか。当方は、Win10、Chrome83 Firefox77 で検証しています。

[ryouk]

chromeで見るとできました。
ありがとうございます。
Interunet Exprorerで見ると、できませんでした。
何か違いがあるのでしょうか。
私もWin10を使用しています。

[Lhankor_Mhy]

IE11 は、display: contents も all: unset も対応してないですね。

https://caniuse.com/#feat=css-display-contents
https://caniuse.com/#feat=css-all

逆に、IE11で all: unset の方が動作した、ということが驚きです。

[ryouk]

本当ですか！
ありがとうございました！