z-index query

[KiwiBrian]

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.

 

[rf]

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.

 

[KiwiBrian]

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?

 

[rf]

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

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?

 

[Ben C]

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.

 

[Beauregard T. Shagnasty]

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://www.kiwibrian.qupis.com/test/test.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.

 

[rf]

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 :-(

 

[KiwiBrian]

You have numerous serious errors on the page. Please investigate:
<http://validator.w3.org/check?verbose=1&uri=http://www.kiwibrian.qupis.com/test/test.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.

 

[rf]

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.

 

[KiwiBrian]

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.

 

[Bergamot]

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.