Question

我有一个容器div，里面有两个div，一个div是图片，另一个div是文本。我想把文字放在图像上。我为图片position:relative设置div，为文本div设置position:absolute;

HTML：

<div class="headerAds">
            <div class="headerAdsPicture">
                <img src="img/adsbg.png" alt="Ad background picture">
            </div><!--Closed div headerAdsPicture-->
            <div class="headerAdsText">
                <span>This is text!</span>
            </div>
        </div><!--Closed div headerAds-->

CSS

.headerAdsPicture{
    position: relative;
}
.headerAdsText{
    position: absolute;
}

Answer 1

使用

.headerAds{
    position: relative;
}
.headerAdsText{
    position: absolute;
    top:0;
}

您应该在您要使用的子position:relative的父上使用position:absolute

.headerAds{
    position: relative;
}
.headerAdsText{
    position: absolute;
    top:0;
}

<div class="headerAds">
            <div class="headerAdsPicture">
                <img src="img/adsbg.png" alt="Ad background picture"/>
            </div><!--Closed div headerAdsPicture-->
            <div class="headerAdsText">
                <span>This is text!</span>
            </div>
        </div><!--Closed div headerAds-->

Answer 2

使用此代码 HTML：

 <div class="headerAds">
         <div class="headerAdsText">
                    <span>This is text!</span>
                </div>
                <div class="headerAdsPicture">
                    <img src="http://stylonica.com/wp-content/uploads/2014/02/Beauty-of-nature-random-4884759-1280-800.jpg" alt="Ad background picture">
                </div><!--Closed div headerAdsPicture-->

            </div><!--Closed div headerAds-->

的CSS：

.headerAdsPicture{
    position: relative;
}
.headerAdsText{
    position: absolute;
    z-index:2;
    margin:10px;
}

Answer 3

你遗失了

 z-index

此外，如果图像不像徽标那样重要，并且纯粹是出于背景目的，您应该考虑删除图像容器和img标记，只需将background-image添加到文本包装器中。

因为您的问题有点不清楚，您可能还需要使用top:*distancFromTop*;

.headerAdsPicture {
  position: relative;
}
.headerAdsText {
  position: absolute;
  z-index:9999;
  top:0px;
}

<div class="headerAds">
  <div class="headerAdsPicture">
    <img src="img/adsbg.png" alt="Ad background picture">
  </div>
  <!--Closed div headerAdsPicture-->
  <div class="headerAdsText">
    <span>This is text!</span>
  </div>
</div>
<!--Closed div headerAds-->

Answer 4

试试这个会起作用

.headerAdsText{
    position: absolute;
    z-index: 999;
}

Answer 5

尝试以下

       .headerAdsPicture {
  za index:1;
       position: relative;
    }
    .headerAdsText {
      position: absolute;
      z-index:3;
    }

Answer 6

为top: 0;

添加position: absolute

＆＃13;

*{
    padding: 0;
    margin: 0;
}
.headerAds,
.headerAdsPicture{
    position: relative;
}
.headerAdsText{
    position: absolute; top: 0; left: 0;
}

＆＃13;

<div class="headerAds">
            <div class="headerAdsPicture">
                <img src="http://khm0.googleapis.com/kh?v=169&hl=ru&x=340&y=480&z=10&token=13274" alt="Ad background picture" />
            </div><!--Closed div headerAdsPicture-->
            <div class="headerAdsText">
                <span>This is text!</span>
            </div>
        </div><!--Closed div headerAds-->

＆＃13;

或

＆＃13;

*{
    padding: 0;
    margin: 0;
}

.headerAds{
    background: url(http://khm0.googleapis.com/kh?v=169&hl=ru&x=340&y=480&z=10&token=13274) no-repeat center top;
    height: 256px;
    width: 256px;
}

＆＃13;

<div class="headerAds">
            <!--<div class="headerAdsPicture">
                <img src="" alt="Ad background picture" />
            </div>-->
            <div class="headerAdsText">
                <span>This is text!</span>
            </div>
        </div><!--Closed div headerAds-->

＆＃13;

Answer 7

您的代码存在的问题是您没有给出绝对div的顶部或左侧位置。

将top值提供给headerAdsText将解决您的问题。

使用position:absolute;

时，可以使用顶部，底部，左侧和右侧属性定位元素

＆＃13;

.headerAdsPicture{
    position: relative;
}
.headerAdsText{
    position: absolute;
  top:20px;
  left:20px;
}

＆＃13;

<div class="headerAds">
            <div class="headerAdsPicture">
                <img src="http://i.stack.imgur.com/Lcneh.png" alt="Ad background picture">
            </div><!--Closed div headerAdsPicture-->
            <div class="headerAdsText">
                <span>This is text!</span>
            </div>
        </div>

＆＃13;

希望它有所帮助。

Answer 8

您甚至可以在不使用position:relative和position:absolute

的情况下执行此操作

看看这个例子：

.headerAdsText {
    background: none repeat scroll 0 0 transparent;
    margin: 0 auto;
    margin-top: -100px;
    text-align:center
    width:40%;
}

.headerAds {
    margin:0 auto;
    text-align:center;
}

<div class="headerAds">
            <div class="headerAdsPicture">
                <img src="http://placehold.it/350x150" alt="Ad background picture">
            </div><!--Closed div headerAdsPicture-->
            <div class="headerAdsText">
                <span>This is text!</span>
            </div>
</div><!--Closed div headerAds-->

为什么我无法将文字放在图像上

8 个答案: