Question

我遇到问题：浮动：左侧代码。最后，第三个框与第二个框重叠。这导致文本TEXT2与TEXT3重叠。我希望第三个方框位于第二个方框的右边，紧接着它（请不要使用浮动：右边）。

CSS＆amp; 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>

Reason1：你没有高度和宽度。

Reason2：由于你没有高度和宽度，相对div内的绝对定位会导致重叠。

Answer 2

添加＆＃39;宽度＆＃39;和＆＃39;身高＆＃39;

的价值

<div style="float: left;">

元素。像

<div style="float: left; width: 200px; height: 200px;">

向左浮动不是在前一个div的左侧放置div（第二个与第一个重叠）

2 个答案: