Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all! We have been experiencing an issue on site where threads have been missing the latest postings. The platform host Vanilla are working on this issue. A workaround that has been used by some is to navigate back from 1 to 10+ pages to re-sync the thread and this will then show the latest posts. Thanks, Mike.
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Quick CSS question..

  • 01-07-2010 11:36am
    #1
    py2006
    Registered Users, Registered Users 2 Posts: 9,844 ✭✭✭


    Hey all,

    Trying to teach myself some CSS :D

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

    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


Comments

  • #2
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭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


  • #3
    py2006
    Registered Users, Registered Users 2 Posts: 9,844 ✭✭✭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?


  • #4
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭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


  • #5
    py2006
    Registered Users, Registered Users 2 Posts: 9,844 ✭✭✭py2006


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


  • #6
    castie
    Hosted Moderators Posts: 3,807 ✭✭✭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.


  • Advertisement
  • #7
    daymobrew
    Registered Users, Registered Users 2 Posts: 6,523 ✭✭✭daymobrew


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


Advertisement