CSS: the relative positioned element is now working when adding overflow-x-CodePudding

I want to make the images in day_time_block can cover the title class.
I also want to make all contents in day_time_block can be shown by overflow-x, but when adding overflow-x: auto; in scroll div, the images in day_time_block were covered by title div. like the following code. How to fix it?

HTML:

<html>
      <body>
        <div>
          <div >
            <div >
              <img src="https://www.google.com.hk/images/srpr/logo11w.png" />
              <div >Title</div>
            </div>
            <div >
              <div >
                <div >Sunday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" />
              </div>
              <div >
                <div >Monday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" />
              </div>
              <div >
                <div >Tuesday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" />
              </div>
              <div >
                <div >Wednesday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" />
              </div>
              <div >
                <div >Thursday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" />
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

CSS:

<style>
          body {
            margin: 0px;
          }
          .title {
            background: #ED3632;
            height: 25px;
          }
          .img_title {
            width: 30px;
            height: 20px;
            float: left;
            margin-left: 15px;
            margin-right: 5px;
          }
          .daily_title {
            color: #f6ff52;
            font-size: 1em;
            
          }
          .daily_content {
            background: #000000;
            height: 3000px;

          }
          .scroll {
            color: #ffffff;
            font-size: 1em;
            width: 480px;
            overflow-x: auto;
            white-space: nowrap;
            background-color: aqua;
            border: 1px red solid;
            display: flex;
          }

          .day_time_block {
            float: left;
            color: #ffffff;
            font-size: 1em;
            padding-left: 8px;
          }

          .day_time_text {
            font-size: 1em;
            display: inline-block;
          }

          .daily_img {
            width: 30px;
            height: 20px;
            margin-left: 10px;
            position: relative;
            top: -10px;
          }
</style>

CodePudding user response：

overflow work with display:block...but if you want to use display:flex then create parent div for that and make this display:block and apply overflow on parent div.