Search code examples
htmlcsscss-positionoverflow

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

  1. I want to make the images in day_time_block can cover the title class.

  2. 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 class="daily_content">
            <div class="title">
              <img src="https://www.google.com.hk/images/srpr/logo11w.png" class="img_title"/>
              <div class="daily_title">Title</div>
            </div>
            <div class="scroll">
              <div class="day_time_block">
                <div class="day_time_text">Sunday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
              </div>
              <div class="day_time_block">
                <div class="day_time_text">Monday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
              </div>
              <div class="day_time_block">
                <div class="day_time_text">Tuesday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
              </div>
              <div class="day_time_block">
                <div class="day_time_text">Wednesday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
              </div>
              <div class="day_time_block">
                <div class="day_time_text">Thursday</div>
                <img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
              </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>
Solution

  • 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.