mozilla

Compare Revisions

Stacking without z-index

Change Revisions

Revision 46878:

Revision 46878 by azatazz on

Revision 46879:

Revision 46879 by deepakjoy on

Title:
Stacking without z-index
Stacking without z-index
Slug:
CSS/Understanding_z-index/Stacking_without_z-index
CSS/Understanding_z-index/Stacking_without_z-index
Tags:
css, Understanding_CSS_z-index
css, Understanding_CSS_z-index
Content:

Revision 46878
Revision 46879
n31        <p>n31        <div class="warning">
32          Standard blocks (DIV #5) in the normal flow, without an32          <strike>Standard blocks (DIV #5) in the normal flow, wi
>y positioning property, are always rendered before positioned ele>thout any positioning property, are always rendered before positi
>ments, and appear below them, even if they come later in the HTML>oned elements, and appear below them, even if they come later in 
> hierarchy.>the HTML hierarchy.</strike> <strong>As you can see, that this po
 >int is not valid anymore (for FF 3.6 at least)!</strong>
33        </p>33        </div>
nn35    </ul>
36    <p>
37      <img alt="Example of stacking rules without using z-index p
 >roperty" class=" internal" src="/@api/deki/files/910/=Understandi
 >ng_zindex_01.png">
38    </p>
39    <p>
40      ^^Note: The image above is incorrect, see below for actual 
 >rendering.
35    </ul><!-- @-@-@-@-@-@@-@-@-@-@-@-@@- READ THIS  --><!-- SEE T41    </p><!-- @-@-@-@-@-@@-@-@-@-@-@-@@- READ THIS  --><!-- SEE TH
>HIS BEFORE MODIFYING: I had to use absolute positioning for the r>IS BEFORE MODIFYING: I had to use absolute positioning for the re
>endering to be accurate. So you'll have to readjust the 'top' val>ndering to be accurate. So you'll have to readjust the 'top' valu
>ues for DIVs with IDs 'absdiv1' and 'absdiv2'. Please excuse the >es for DIVs with IDs 'absdiv1' and 'absdiv2'. Please excuse the n
>noobness, but thats what I am... --><!-- @-@-@@-@-@-@-@-@-@@-@-@->oobness, but thats what I am... --><!-- @-@-@@-@-@-@-@-@-@@-@-@-@
>@  READ THIS-->>  READ THIS-->
n37      <div id="absdiv1" style="font: 12px Arial; position: absolun43      <div id="absdiv1" style="opacity: 0.7; font: 12px Arial; po
>te; width: 150px; height: 350px; top: 965px; left: 10px; border: >sition: absolute; width: 150px; height: 350px; top: 965px; left: 
>1px dashed rgb(153, 0, 0); background-color: rgb(255, 221, 221); >10px; border: 1px dashed rgb(153, 0, 0); background-color: rgb(25
>text-align: center;">>5, 221, 221); text-align: center;">
n42      <div id="reldiv1" style="font: 12px Arial; height: 100px; pn48      <div id="reldiv1" style="opacity: 0.7; font: 12px Arial; he
>osition: relative; top: 30px; border: 1px dashed rgb(102, 153, 10>ight: 100px; position: relative; top: 30px; border: 1px dashed rg
>2); background-color: rgb(204, 255, 204); margin: 0px 50px; text->b(102, 153, 102); background-color: rgb(204, 255, 204); margin: 0
>align: center;">>px 50px; text-align: center;">
n47      <div id="reldiv2" style="font: 12px Arial; height: 100px; pn53      <div id="reldiv2" style="opacity: 0.7; font: 12px Arial; he
>osition: relative; top: 15px; left: 20px; border: 1px dashed rgb(>ight: 100px; position: relative; top: 15px; left: 20px; border: 1
>102, 153, 102); background-color: rgb(204, 255, 204); margin: 0px>px dashed rgb(102, 153, 102); background-color: rgb(204, 255, 204
> 50px; text-align: center;">>); margin: 0px 50px; text-align: center;">
n52      <div id="absdiv2" style="font: 12px Arial; position: absolun58      <div id="absdiv2" style="opacity: 0.7; font: 12px Arial; po
>te; width: 150px; height: 350px; top: 965px; left: 340px; border:>sition: absolute; width: 150px; height: 350px; top: 965px; left: 
> 1px dashed rgb(153, 0, 0); background-color: rgb(255, 221, 221);>340px; border: 1px dashed rgb(153, 0, 0); background-color: rgb(2
> text-align: center;">>55, 221, 221); text-align: center;">
n57      <div id="normdiv" style="font: 12px Arial; height: 70px; bon63      <div id="normdiv" style="opacity: 0.7; font: 12px Arial; he
>rder: 1px dashed rgb(153, 153, 102); background-color: rgb(255, 2>ight: 70px; border: 1px dashed rgb(153, 153, 102); background-col
>55, 204); margin: 0px 50px; text-align: center;">>or: rgb(255, 255, 204); margin: 0px 50px; text-align: center;">
tt82   opacity: 0.7;

Back to History