z-index query

Discussion in 'HTML' started by KiwiBrian, Feb 5, 2008.

  1. KiwiBrian

    KiwiBrian Guest

    Can anyone tell me why the image is obscuring the text in the following
    simplified test page:-
    http://www.kiwibrian.qupis.com/test/test.html
    I had expected that my allocation of z-index:1 to both the image and it's
    containing div, along with an allocation of z-index:100 to the text
    paragraph tag, would have ensured that the text would be visibly
    superimposed on the image, but not so.
     
    KiwiBrian, Feb 5, 2008
    #1
    1. Advertising

  2. KiwiBrian

    rf Guest

    "KiwiBrian" <> wrote in message
    news:fo9a72$m92$...
    > Can anyone tell me why the image is obscuring the text in the following
    > simplified test page:-
    > http://www.kiwibrian.qupis.com/test/test.html
    > I had expected that my allocation of z-index:1 to both the image and it's
    > containing div, along with an allocation of z-index:100 to the text
    > paragraph tag, would have ensured that the text would be visibly
    > superimposed on the image, but not so.


    z-index only applies to positioned elements. The <p> containing that text is
    not positioned so z-index does not apply.

    http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index

    Pay particular attention to the concept of staking context and kicak
    stacking context.

    --
    Richard.
     
    rf, Feb 5, 2008
    #2
    1. Advertising

  3. KiwiBrian

    KiwiBrian Guest

    "rf" <> wrote in message
    news:88Wpj.11447$...
    >
    > "KiwiBrian" <> wrote in message
    > news:fo9a72$m92$...
    >> Can anyone tell me why the image is obscuring the text in the following
    >> simplified test page:-
    >> http://www.kiwibrian.qupis.com/test/test.html
    >> I had expected that my allocation of z-index:1 to both the image and it's
    >> containing div, along with an allocation of z-index:100 to the text
    >> paragraph tag, would have ensured that the text would be visibly
    >> superimposed on the image, but not so.

    >
    > z-index only applies to positioned elements. The <p> containing that text
    > is not positioned so z-index does not apply.
    >
    > http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
    >
    > Pay particular attention to the concept of staking context and kicak
    > stacking context.


    Thanks Richard.
    Another lesson learnt.
    I added position:relative to the text-containing div and that produced the
    desired result.
    Would I need to be aware of any possible unwanted side-effects from making
    my text paragraph relatively positioned?
     
    KiwiBrian, Feb 5, 2008
    #3
  4. KiwiBrian

    rf Guest

    "KiwiBrian" <> wrote in message
    news:fo9c2h$ne8$...
    >
    > "rf" <> wrote in message
    > news:88Wpj.11447$...
    >>
    >> "KiwiBrian" <> wrote in message
    >> news:fo9a72$m92$...
    >>> Can anyone tell me why the image is obscuring the text in the following
    >>> simplified test page:-
    >>> http://www.kiwibrian.qupis.com/test/test.html
    >>> I had expected that my allocation of z-index:1 to both the image and
    >>> it's containing div, along with an allocation of z-index:100 to the text
    >>> paragraph tag, would have ensured that the text would be visibly
    >>> superimposed on the image, but not so.

    >>
    >> z-index only applies to positioned elements. The <p> containing that text
    >> is not positioned so z-index does not apply.
    >>
    >> http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
    >>
    >> Pay particular attention to the concept of staking context and kicak


    Streuth. Move a hand one notch to the left and 'local' becomes 'kicak' :)

    >> stacking context.

    >
    > Thanks Richard.
    > Another lesson learnt.
    > I added position:relative to the text-containing div and that produced the
    > desired result.
    > Would I need to be aware of any possible unwanted side-effects from making
    > my text paragraph relatively positioned?


    Er, IIRC the only thing to consider is that by positioning (relative) that
    <p> you are establishing a new block formatting context so anything
    absolutely positioned within that <p> will now be positioned relative to the
    <p> rather than relative to the enclosing block formatting context, but
    that should not worry you as you aren't going to absolutely position
    anything within that <p>, are you :)

    BTW why are you positioning red text without background over that very dark
    golf ball? Experimental stuff? :)

    --
    Richard.
     
    rf, Feb 5, 2008
    #4
  5. KiwiBrian

    Ben C Guest

    On 2008-02-05, rf <> wrote:
    [...]
    >> I added position:relative to the text-containing div and that produced the
    >> desired result.
    >> Would I need to be aware of any possible unwanted side-effects from making
    >> my text paragraph relatively positioned?

    >
    > Er, IIRC the only thing to consider is that by positioning (relative) that
    ><p> you are establishing a new block formatting context


    I think you mean "containing block for positioned descendents".
    Position: relative does *not* establish a new block formatting context.

    Containing blocks for positioned descendents and block formatting
    contexts are very different things.

    Block formatting contexts are all about floats. Floats live inside BFCs.
    BFCs grow to fit floats, or narrow to get out of the way of floats.
    Floats do not cross BFC boundaries. The effects of a float are limited
    to the BFC it is in.

    Containing blocks are mainly about width calculations for normal flow
    elements and for providing reference points for absolutely positioned
    elements.

    But what you're actually saying is still basically true: position:
    relative has no real side-effects other than establishing a new
    containing block for positioned descendents. So if the block has no
    positioned descendents, OP shouldn't have any problems.
     
    Ben C, Feb 5, 2008
    #5
  6. KiwiBrian wrote:

    > "rf" wrote:
    >> "KiwiBrian" wrote:
    >>> Can anyone tell me why the image is obscuring the text in the
    >>> following simplified test page:-
    >>> http://www.kiwibrian.qupis.com/test/test.html
    >>> I had expected that my allocation of z-index:1 to both the image and
    >>> it's containing div, along with an allocation of z-index:100 to the
    >>> text paragraph tag, would have ensured that the text would be
    >>> visibly superimposed on the image, but not so.

    >>
    >> z-index only applies to positioned elements. The <p> containing that
    >> text is not positioned so z-index does not apply.
    >>
    >> http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
    >>
    >> Pay particular attention to the concept of staking context and kicak
    >> stacking context.

    >
    > Thanks Richard. Another lesson learnt.
    >
    > I added position:relative to the text-containing div and that
    > produced the desired result. Would I need to be aware of any possible
    > unwanted side-effects from making my text paragraph relatively
    > positioned?


    You have numerous serious errors on the page. Please investigate:
    <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.kiwibrian.qupis.com%2Ftest%2Ftest.html>

    and a CSS error:
    Value Error : float center is not a float value : center

    Float can be only left or right. Don't forget to assign a background
    color to body.

    --
    -bts
    -Friends don't let friends drive Vista
     
    Beauregard T. Shagnasty, Feb 5, 2008
    #6
  7. KiwiBrian

    rf Guest

    "Ben C" <> wrote in message
    news:...
    > On 2008-02-05, rf <> wrote:
    > [...]
    >>> I added position:relative to the text-containing div and that produced
    >>> the
    >>> desired result.
    >>> Would I need to be aware of any possible unwanted side-effects from
    >>> making
    >>> my text paragraph relatively positioned?

    >>
    >> Er, IIRC the only thing to consider is that by positioning (relative)
    >> that
    >><p> you are establishing a new block formatting context

    >
    > I think you mean "containing block for positioned descendents".
    > Position: relative does *not* establish a new block formatting context.


    Correct Ben. I always get those the wrong way round :-(

    --
    Richard.
     
    rf, Feb 5, 2008
    #7
  8. KiwiBrian

    KiwiBrian Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:NfXpj.199090$...
    > KiwiBrian wrote:
    >
    >> "rf" wrote:
    >>> "KiwiBrian" wrote:
    >>>> Can anyone tell me why the image is obscuring the text in the
    >>>> following simplified test page:-
    >>>> http://www.kiwibrian.qupis.com/test/test.html
    >>>> I had expected that my allocation of z-index:1 to both the image and
    >>>> it's containing div, along with an allocation of z-index:100 to the
    >>>> text paragraph tag, would have ensured that the text would be
    >>>> visibly superimposed on the image, but not so.
    >>>
    >>> z-index only applies to positioned elements. The <p> containing that
    >>> text is not positioned so z-index does not apply.
    >>>
    >>> http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
    >>>
    >>> Pay particular attention to the concept of staking context and kicak
    >>> stacking context.

    >>
    >> Thanks Richard. Another lesson learnt.
    >>
    >> I added position:relative to the text-containing div and that
    >> produced the desired result. Would I need to be aware of any possible
    >> unwanted side-effects from making my text paragraph relatively
    >> positioned?

    >
    > You have numerous serious errors on the page. Please investigate:
    > <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.kiwibrian.qupis.com%2Ftest%2Ftest.html>
    >
    > and a CSS error:
    > Value Error : float center is not a float value : center
    >
    > Float can be only left or right. Don't forget to assign a background
    > color to body.


    Thanks everyone for most interesting comments.
    My source was just a minimal version of the type of problem I was
    encountering and the colours were arbitrary.
    It was certainly very interesting to see the validation errors in the code
    added below my closing HTML tag, by the free hosting service.
    It was the only free hosting that I have been able to find so far which
    includes PHP and mySQL, which will allow me to experiment with a simple CMS
    system.
     
    KiwiBrian, Feb 5, 2008
    #8
  9. KiwiBrian

    rf Guest

    "KiwiBrian" <> wrote in message
    news:fo9trf$2bk$...
    >
    > It was certainly very interesting to see the validation errors in the code
    > added below my closing HTML tag, by the free hosting service.
    > It was the only free hosting that I have been able to find so far which
    > includes PHP and mySQL, which will allow me to experiment with a simple
    > CMS system.


    What?

    Download a PHP/mySQL package and install it on your own computer. Takes
    about 5 minutes.

    --
    Richard.
     
    rf, Feb 5, 2008
    #9
  10. KiwiBrian

    KiwiBrian Guest

    Re: z-index query and CMS

    "rf" <> wrote in message
    news:UI5qj.11638$...
    >
    > "KiwiBrian" <> wrote in message
    > news:fo9trf$2bk$...
    >>
    >> It was certainly very interesting to see the validation errors in the
    >> code added below my closing HTML tag, by the free hosting service.
    >> It was the only free hosting that I have been able to find so far which
    >> includes PHP and mySQL, which will allow me to experiment with a simple
    >> CMS system.

    >
    > What?
    >
    > Download a PHP/mySQL package and install it on your own computer. Takes
    > about 5 minutes.


    Thanks Richard.
    I have got that far and playing with Navicat at present as presumably it is
    better than phpMyAdmin.
    My present plan for a basic and hopefully simple CMS is CMSmadesimple.
    I welcome any recommendations for such an application, preferably free and
    under active development and well supported with an active forum.
    Must be basic, not joomla-like.
     
    KiwiBrian, Feb 6, 2008
    #10
  11. KiwiBrian

    Bergamot Guest

    Re: z-index query and CMS

    KiwiBrian wrote:
    >
    > My present plan for a basic and hopefully simple CMS is CMSmadesimple.


    Good choice, IMO. It's customizable enough if you need to tweak it,
    which I have, and has all the add-on modules users commonly ask for.

    I've heard favorable reviews about Website Baker, but think CMSMS is
    even easier for the average user to work with. WB is also undergoing a
    rewrite, so I'd hesitate to do much with it until the next release.

    --
    Berg
     
    Bergamot, Feb 6, 2008
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. karthikeyavenkat
    Replies:
    2
    Views:
    646
    Bryce
    Mar 17, 2005
  2. Shawn W_
    Replies:
    5
    Views:
    310
    Aldric Giacomoni
    Sep 16, 2009
  3. ngoc
    Replies:
    5
    Views:
    194
    Tad McClellan
    May 11, 2006
  4. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    336
    Tomasz Chmielewski
    Mar 4, 2008
  5. Stefan Mueller
    Replies:
    7
    Views:
    206
    Thomas 'PointedEars' Lahn
    Nov 28, 2005
Loading...

Share This Page