CODEWITHSUNDEEP
htmlcss
RS92
RS92

Reputation: 485

Why I can't position text over image

I have one container div, inside I have two divs, one div is picture, another div is text. I want to put text over image. I set for div with picture position:relative, and for text div set 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;
}

Upvotes: 1

Views: 1211

Answers (8)

Danish Khan
Danish Khan

Reputation: 143

Use this code 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;
}

Upvotes: 1

Rotan075
Rotan075

Reputation: 2615

You can even do this without using position:relative and position:absolute

Look at this example:

.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-->

Upvotes: 0

ketan
ketan

Reputation: 19341

The issue with your code is you didn't give top or left position of your absolute div.

Give top value to headerAdsText will solve your issue.

Elements can be positioned using the top, bottom, left, and right properties when you use position:absolute;

.headerAdsPicture{
    position: relative;
}
.headerAdsText{
    position: absolute;
  top:20px;
  left:20px;
}
<div class="headerAds">
            <div class="headerAdsPicture">
                <img src="https://i.sstatic.net/Lcneh.png" alt="Ad background picture">
            </div><!--Closed div headerAdsPicture-->
            <div class="headerAdsText">
                <span>This is text!</span>
            </div>
        </div>

Hope it helps.

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4503

add top: 0; for position: absolute

*{
    padding: 0;
    margin: 0;
}
.headerAds,
.headerAdsPicture{
    position: relative;
}
.headerAdsText{
    position: absolute; top: 0; left: 0;
}
<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-->

or

*{
    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;
}
<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-->

Upvotes: 0

Arshid KV
Arshid KV

Reputation: 10037

Try as follows 

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

Upvotes: 0

user4563161
user4563161

Reputation:

Your missing

 z-index

Also if the image isnt anything important like a logo and is purely for background purposes you should think about getting rid of your image container and img tag and just adding background-image to your text wrapper.

as it was a little unclear in your question you may also require the use of 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-->

Upvotes: 0

Bilal Maqsood
Bilal Maqsood

Reputation: 1246

try this it will work 

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

Upvotes: 0

AmmarCSE
AmmarCSE

Reputation: 30557

Use

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

You should use position:relative on the parent of the child position:absolute you wish to use

.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-->

Upvotes: 2

Related Questions