«

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

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.

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.qup is.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

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

"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.qup is.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" <> 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" <> 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.