z-index query

K

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.
 
R

rf

KiwiBrian said:
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.
 
K

KiwiBrian

rf said:
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?
 
R

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? :)
 
B

Ben C

On 2008-02-05 said:
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.
 
B

Beauregard T. Shagnasty

KiwiBrian said:
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.
 
R

rf

Ben C said:
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 :-(
 
K

KiwiBrian

Beauregard T. Shagnasty said:
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.
 
R

rf

KiwiBrian said:
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.
 
K

KiwiBrian

rf said:
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.
 
B

Bergamot

KiwiBrian said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top