PerfectEquation
/
GZ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!DOCTYPE html>
<html>
  <head>
    <title>z-index tests #2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../test.js"></script>
    <style type="text/css">

      div { font: 12px Arial; }

      span.bold { font-weight: bold; }

      #div2 { z-index: 2; }
      #div3 { z-index: 1; }
      #div4 { z-index: 10; }

      #div1,#div3 {
        height: 80px;
        position: relative;
        border: 1px solid #669966;
        background-color: #ccffcc;
        padding-left: 5px;
      }

      #div2 {
        opacity: 0.8;
        position: absolute;
        width: 150px;
        height: 200px;
        top: 20px;
        left: 170px;
        border: 1px solid #990000;
        background-color: #ffdddd;
        text-align: center;
      }

      #div4 {
        opacity: 0.8;
        position: absolute;
        width: 200px;
        height: 70px;
        top: 65px;
        left: 50px;
        border: 1px solid #000099;
        background-color: #ddddff;
        text-align: left;
        padding-left: 10px;
      }

      #div5{
        border: 1px solid #669966;
        background-color: #ccffcc;
        padding-left: 5px;
        position:relative;
        margin-bottom:-15px;
        height:50px;
        margin-top:10px;

      }

      #div6{
        border: 1px solid #000099;
        background-color: #ddddff;
        text-align: left;
        padding-left: 10px;

      }

    </style></head>

  <body>

    <br />

    <div id="div1">
      <br /><span class="bold">DIV #1</span>
      <br />position: relative;
      <div id="div2">
        <br /><span class="bold">DIV #2</span>
        <br />position: absolute;
        <br />z-index: 2;
      </div>
    </div>

    <br />

    <div id="div3">
      <br /><span class="bold">DIV #3</span>
      <br />position: relative;
      <br />z-index: 1;
      <div id="div4">
        <br /><span class="bold">DIV #4</span>
        <br />position: absolute;
        <br />z-index: 10;
      </div>
    </div>

    <div id="div5"><br />DIV #5<br />position:relative;<br /></div>

    <div id ="div6"><br />DIV #6<br />position:static;<br /></div>

  </body>
</html>