Ian Piper wrote:
> On 14 May 2006, at 10:12 am, Ingo Chao wrote:
>>> If anyone could point me at a general example of how to position
>>> graphics over other elements I'd be grateful.
>> One option: Define a containing block via position:relative on any
>> box.
>> apply position:absolute to the img/imgwrapper and offset it with
>> top+left relatively to the origin of the c. b.
>>
>
> That is looking good, except that now the graphic is overlaying the
> footer too (http://www.tellura.co.uk/soundsteps).
>
> Is this what you meant? Also, I'm not clear where the containing
> block (pic_container) actually is! Where is its origin?
I thought you were asking for a general example. Your page did already
show the img at the right place in IE, I thought.
A containing block for an absolutely positioned box is its nearest
positioned ancestor.
If there is no such ancestor, then any offset relates to the initial
containing block established by the html element.
The origin for the offset is 0,0 left/top of the c.b.
<p><img>Text</p>
With
img {position:absolute; top:10px; left: -10px;},
this offsets the img relatively to its c.b. This c.b. is performed by
the p with
p {position:relative;}
You were asking where the c.b. is. In this case, it's the normal flow
position of the paragraph. The a.p. image itself is completely taken out
of the flow, and other elements do not know of its existence. Naturally,
this causes the img to overlap anything, including the footer.
If you are looking for an overlapping that is respected in some way by
following elements, than your option is to float the img, drag it via
margin: negative/positive values to taste, and clear it by some
following element. You may have to add position:relative to the float to
prevent clipping in IE.
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
