【问题标题】:negative margin and background负边距和背景
【发布时间】:2014-11-17 17:19:11
【问题描述】:

在下面的标记中,我只想为.text div 设置负边距,使其出现在.image div 的顶部。

<div class="wrap">
    <div class="image"><img src="imgage.jpg" /></div>
    <div class="text">text with background</div>
</div>


.image {
    overflow: hidden;
}

.text{
    background: green;
    padding: 20px;
    margin-top: -60px;
    color: #FFFFFF;
    overflow: hidden;
}

我已经为.text 设置了背景,但由于某种原因它没有出现在图像上。仅显示文本。你可以在这里看到问题:http://jsfiddle.net/ovkn4egc/

如何在不使用绝对位置的情况下修复它。 谢谢。

【问题讨论】:

    标签: html css


    【解决方案1】:

    您可以简单地将position:relative; 添加到.text

    DEMO

    * {
        margin: 0;
        padding: 0;
    }
    .image {
        overflow: hidden;
    }
    .image img {
        display: block;
    }
    .text {
        position:relative;
        background: green;
        padding: 20px;
        margin-top: -60px;
        color: #FFFFFF;
        overflow: hidden;
    }
    <div class="wrap">
        <div class="image">
            <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
        </div>
        <div class="text">text with background</div>
    </div>

    【讨论】:

    • 如果我们下面有其他元素,这将不起作用,因为流程中会有间隙:(
    • @MgGm 你能详细说明一下吗?在下面的小提琴中,我在下面添加了一个元素,并且流中没有间隙:jsfiddle.net/webtiki/nc7x0fzm/1
    【解决方案2】:

    更新为:

     <div class="wrap">
         <div class="text">text with background</div>
        <div class="image">
        <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
        </div>
    </div>
    
    *{
        margin: 0;
        padding: 0;
    }
    
    .image {
        overflow: hidden;
    }
    
    .image img{
        display: block;
    }
    
    .text{
        background: green;
        padding: 20px;
        color: #FFFFFF;
        overflow: hidden;
        position:relative;
        top: 0;
    }
    

    http://jsfiddle.net/ovkn4egc/4/

    【讨论】:

      【解决方案3】:

      如果您希望文本仅跨越图像的宽度,您还需要进行一些更改,如下所示。

      我相信这是你所追求的行为:

      DEMO

      HTML 必须稍作改动,如下所示。

      <div class="wrap">
          <div class="image">
          <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
                  <div class="text">text with background</div>
          </div>
      </div>
      

      image div 的 CSS 也必须更改为这样,我们将 position 属性设置为 absolute

      .image {
          overflow: hidden;    
          position: absolute;
      }
      

      最后,textposition 属性必须更改为:

      .text{
          background: green;
          padding: 20px;
          margin-top: -60px;
          color: #FFFFFF;
          overflow: hidden;
          position: relative;
      }
      

      【讨论】:

        【解决方案4】:

        把你的css改成下面的代码

        *{
          margin: 0;
          padding: 0;
        }
        .wrap{position:relative;}
        .image {
           overflow: hidden;
        }
        
        .image img{
          display: block;
        }
        
        .text{
          background: green;
          padding: 20px;
          top: 0px;
          color: #FFFFFF;
          overflow: hidden;
          position: absolute;
          width: 100%;
        }
        

        还有你的html到下面一个

        <div class="wrap">
            <div class="text">text with background</div>
            <div class="image">
              <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
            </div>
        </div>
        

        我将 .wrap 写成相对的,因为文本 div 应该根据 wrap div 比较它的位置,否则如果你只对文本 div 使用绝对值,那么它将根据 body 定位。

        【讨论】:

          猜你喜欢
          • 2011-05-12
          • 1970-01-01
          • 2012-03-28
          • 2011-08-10
          • 2013-11-02
          • 1970-01-01
          • 1970-01-01
          • 2023-03-17
          • 2014-06-10
          相关资源
          最近更新 更多