html - 向左浮动不是将 div 放在前一个 div 的左侧(第二个与第一个重叠)

Question

我有问题:float: left 代码。最后，第三个框与第二个框重叠。这会导致文本 TEXT2 与 TEXT3 重叠。我希望第三个框位于第二个框的右侧，紧随其后(请不要使用 float: right)。

Fiddle link .

CSS 和 HTML 代码一起: (我知道 css 应该在外部文件中，但这是在设计模式下:)

   <div style="float: left;">
            <div style="position: relative;">
              <div style="z-index: 2; position: absolute; top:0; right 0;">
                <img src="images/featured-taxtips.png" width="200px" />
              </div>
              <div style="z-index: 4; position absolute; top:0; right 0;">
                <img src="images/featured-gradient.png" width="200px" />
              </div>
              <div style=
                "z-index: 6; position: absolute; top:0; right 0;">
                TEXT1</div>
            </div>
          </div>

          <div style="float: left;">
            <div style="position: relative;">
              <div style="z-index: 2; position: absolute; top:0; right 0;">
                <img src="images/featured-lifestyle.png" width="200px" />
                </div>
              <div style="z-index: 4; position: absolute; top:0; right 0;">
                <img src="images/featured-gradient.png" width="200px" />
                </div>
              <div style="z-index: 6; position: absolute; top:10px; left 10px;">TEXT2</div>
            </div>
         </div>

        <div style="float: left;">
          <div style="position: relative;">
            <div style="z-index: 2; position: absolute; top:0; right 0;">
              <img src="images/featured-video.png" width="200px" />
            </div>
            <div style="z-index: 4; position: absolute; top:0; right 0;">
              <img src="images/featured-gradient.png" width="200px" />
            </div>
            <div style="z-index: 6; position: absolute; top:10px; left 10px;">TEXT3</div>
          </div>
        </div>

Answer 1

Demo

删除第二个 div 的第一个 div 的绝对位置。

 <div style="float: left;">
    <div style="position: relative;">
      <div style="z-index: 2;">
        <img src="images/featured-lifestyle.png" width="200px" />
        </div>
      <div style="z-index: 4; position: absolute; top:0; right 0;">
        <img src="images/featured-gradient.png" width="200px" />
        </div>
      <div style="z-index: 6; position: absolute; top:10px; left 10px;">TEXT2</div>
    </div>
 </div>

理由一: 你没有高度和宽度。

原因2: 由于您没有高度和宽度，相对 div 内的绝对定位会导致重叠。