Postion: Relative - why is it knocking everything else out?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Postion: Relative - why is it knocking everything else out?

Post by simonmlewis »

Code: Select all

.img_ghost
{
position:relative;
right:-260px;
top: -30px;
height: 156px;
}
I'm trying to position an image over the top of another one, so the tip of it's head is outside the background DIV.
I can do this. But what I cannot do, is stop it forcing the text (and text/image) on the left above the ghost, or below the ghost.

Is there a CSS 'position' that does this without causing this problem?
Attachments
The top of the ghost's head is in line with the bottom of the text on the left.
The top of the ghost's head is in line with the bottom of the text on the left.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Postion: Relative - why is it knocking everything else

Post by Celauran »

You want absolute positioning here.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Postion: Relative - why is it knocking everything else

Post by simonmlewis »

How? I tried that and it went even worse!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Postion: Relative - why is it knocking everything else

Post by Celauran »

Relative positioning on the parent, absolute on the child.

Code: Select all

<div id="parent">
    <img class="img_ghost" src="whatever" />
</div>

Code: Select all

#parent { position: relative; }
.img_ghost {
    position: absolute;
    top: 3px;
    left: 3px;
}
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Postion: Relative - why is it knocking everything else

Post by simonmlewis »

What stops the parent DIV taking up the width of the outter div, and still pushing the text down below it?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply