CSS：添加 overflow-x 时相对定位元素现在起作用

Question

我想让day_time_block里的图片能盖住标题class.
我也想让day_time_block里的所有内容都能被overflow-x显示出来，但是在滚动div中添加overflow-x: auto;时， day_time_block 中的图像被标题 div 覆盖。像下面的代码。如何解决？

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>

Answer 1

overflow 与 display:block 一起工作......但是如果你想使用 display:flex 然后为此创建父 div 并制作这个 display:block 并在父级上应用溢出div.

CSS：添加 overflow-x 时相对定位元素现在起作用

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

html

css

css-position

overflow