CODEWITHSUNDEEP
css
Matthew Optional Meehan
Matthew Optional Meehan

Reputation: 745

Having text on top of an image in another div

So what I am trying to achieve is have the text in the left side sit on top of the image in the right side

<div class="body-content">
    <div class="left-side">
        <p>text</p>
    </div>
    <div class="right-side">
        <div class="img-container>
            <img/>
        </div>
    </div>
</div>

the problem is that it seems to not work at all when image off in another div.

I can get it working when everything is within the same div, so I'm not sure if what I am trying is even possible.

heres a slice that explains whats happening http://jsfiddle.net/F3UQr/

Upvotes: 0

Views: 94

Answers (2)

deansimcox
deansimcox

Reputation: 426

All you are missing is a position attribute on the left-side.

For the z-index property to apply, the element also need to have a position other than static.

.left-side {
    position: relative;
    z-index:1;
}

http://jsfiddle.net/dean_simcox/MnYa8/

Upvotes: 1

deebs
deebs

Reputation: 1410

I think I see what you're trying to do. The z-index is set for ".left-side" but the position needs to be set as well for that to take effect. I set the position to "relative" but you can also do absolute, fixed, etc. Updated fiddle here: http://jsfiddle.net/JS26k/

.left-side
{
     z-index: 1;
     position: relative;
{

Upvotes: 1

Related Questions