Member Avatar for davy_yg

index.php

<div style="width: 220px; color: black; margin: 0 0 0 800px; z-index: 2;">

<?php

// How can we help

$result = mysql_query("SELECT * FROM `static_page` WHERE post_id='27'") or die(mysql_error());

echo '<td>';
while ($data = mysql_fetch_array($result)){
       $isi = $data['isi_berita'];
       echo '<h2>'.$data['judul'].'</h2><br><br>';
       echo substr($isi, 0, 1000).'<br>';
}

?>      
</div>

<div style="margin: -250px 0 0 730px; position: relative; z-index: 0;"><image src="images/help.jpg"></div>

I wonder why z-index:2 which is suppose to be on top of z-index:0 does not work as it suppose to be. The fact is the contrary.

  • 5 Contributors
  • 9 Replies
  • 206 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Alicera Nz

Dani AI

Generated

Short answer: the element with z-index must be positioned (not position: static) and stacking contexts matter. In the OP example the first div has z-index:2 but no position, so that z-index is ignored; the second div has position: relative and a specified z-index which creates a stacking context and ends up on top. was right to point out the need for positioning; is also correct that z-index:0 is a valid value.

A few practical points and checks that are often missed:

  • Make sure the element you want on top is positioned (relative, absolute, fixed, or sticky) before giving it a z-index.
  • Remember stacking contexts: if an ancestor creates a new stacking context (for example by having a positioned z-index, a transform, opacity < 1, filter, isolation, etc.), children are stacked inside that context and cannot escape it to sit above elements outside that context. That is a common cause of "z-index not working."
  • z-index accepts 0 and negative values; auto is the default. Inline styles work but make debugging harder—use classes in a stylesheet.

Quick minimal example (not the same as the original inline markup):

.box-top  { position: relative; z-index: 10; /* appears above */ }
.box-below{ position: relative; z-index: 1;  /* appears below */ }

Troubleshooting checklist:

  1. Give the target element a non-static position.
  2. Inspect ancestors for transform, opacity, z-index, filter, or isolation that may create a stacking context.
  3. Use browser devtools (computed styles / stacking context viewer) to see which context an element belongs to.
  4. If overlapping layout is the goal, prefer controlled positioning (absolute/relative) rather than large margins.

For the original code, the simplest fix is to add position: relative (or absolute) to the element that should be on top and ensure no ancestor is forcing an unexpected stacking context.

Recommended Answers

All 9 Replies

Member Avatar for JorgeM

Hmm. On my phone so I can't test but what stands out is that you are applying a relative position to the second div. the relative position takes the element out if its normal position.

I can look at this more tomorrow.

Member Avatar for Troy III

even W3schools got this right:

"Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)."

[!note] Your z-index:2 div element has no position.

Further on, "z-index: 0", (used on your second div) is not a valid z-index css value. Should be a non-zero positive integer or negative. Not sure if you can find this inf., in css documentation though.

commented: wrong -3
Member Avatar for almostbob

below is not correct, w3c documentaton specifies 'integer' which includes zero, zero is defined as the default base, so the declaration <div style="margin: -250px 0 0 730px; position: relative; z-index: 0;"> is correct, but inline styles suck and should be removed to stylesheets

Further on, "z-index: 0", (used on your second div) is not a valid z-index css value. Should be a non-zero positive integer or negative. Not sure if you can find this inf., in css documentation though.

Member Avatar for Troy III

z-index:0;
is equivalent to: unspecified / invalid / value failed to be assigned, etc, etc.

div1 > z-index:0 -will be covered by
div2 > [no index specified]

commented: 0 <> unspecified -3
Member Avatar for almostbob

http://www.w3.org/wiki/CSS/Properties/z-index

The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

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

In the following example, the stack levels of the boxes (named with their "id" attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level is inherited from the root box. The others are specified with the 'z-index' property.

the stack levels of the boxes.. .. "text2"=0 ∴ 0 is valid,

In this case I am one of many who Wrote TFM

Edited by almostbob
commented: z-index:0; is the same as unspecified -2
Member Avatar for almostbob

run the css of a div {z-index:0;} through the w3c css validator if you care to.

Edited by almostbob
Member Avatar for almostbob

Troy_III

I'm sure will provide reference,
that trumps w3c : for the unsupported assertion

until then cease spreading misleading information, don't mess up other people's code

Edited by almostbob
Member Avatar for almostbob

Troy, "unspecified", is not zero
"unspecified" inherits the parent element z-index, any integer value including zero

please stop fabricating information

Member Avatar for Alicera Nz 
z-index:-1;
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.