Quick CSS question..

py2006

Hey all,

Trying to teach myself some CSS

Is it possible to overlap containers? if that makes sense??

I mean similar to the way you can put layers in photoshop on top of one an other!

I have a <div> that has background image, I will have text in this container too. So is it possible to place an image overlapping this div? e.g. on the top right hand corner.

Thanks in advance

Placebo

yes, you can use position:Absolute; or relative? and use the z-index property

[PHP]<div id="container" style="position:absolute; z-zindex:1; width:100%; height:100%; border:1px solid red;">

<div id="text" style="position:relative; top:11px; left:22px; z-index:2; border:1px solid black; width:55px; height:55px;">
Lores pes diu,
</div>

</div>[/PHP]

i think

py2006

Placebo wrote: »

yes, you can use position:Absolute; or relative? and use the z-index property

[PHP]<div id="container" style="position:absolute; z-zindex:1; width:100%; height:100%; border:1px solid red;">

<div id="text" style="position:relative; top:11px; left:22px; z-index:2; border:1px solid black; width:55px; height:55px;">
Lores pes diu,
</div>

</div>[/PHP]

i think

Thanks for that! Am I right in saying that the z-index:1 and z-index:2 are like layers?

Placebo

yeah, you should start with O [but Zero is broke on my keyboard :rolleyes:]

so zero is first, then 1 will be on top and so forth,
you can also go minus integers, but im not sure if thats practiced much, it seems to be used as a desperate measure at a later stage if theres too much to change and you need something to go underneath O


i feel absolute positioning is better used for placing images that make up the template [i.e complex backgrounds]
for the layout you should use floats etc and also have a look at fluid vs fixed http://www.flyte.biz/resources/newsletters/04/12-fluid-v-fixed-web-pages.php


technically you could have a full website with just absolute positioned elements but it will prove hard to manage the site in the future.
Im not 1OO% here so someone can correct me if im wrong

py2006

I am not sure I fully get the whole absolute and relative positioning thing! I am sure the penny will drop!

castie

Absolute refers to using the window itself i.e top: 0px; left 0px; should put it in the top corner ( at least thats the way I use it )

Relative means adjusting from the position it wants to go to and then adding top: -10px; and so on to adjust it around.

daymobrew

A few articles: http://reference.sitepoint.com/css/positioning