title: A lightbox 's CSS
body: <p>I have a lightbox. The html code:</p>
  
  <pre><code>&lt;a id="show-panel" href="#"&gt;Show Panel&lt;/a&gt;
  
  &lt;div id="lightbox-panel"&gt;
  &lt;h2&gt;Lightbox Panel&lt;/h2&gt;
  &lt;p&gt;You can add any valid content here.&lt;/p&gt;
  &lt;p align="center"&gt;
      &lt;a id="close-panel" href="#"&gt;Close this window&lt;/a&gt;
  &lt;/p&gt;
  &lt;/div&gt;&lt;!-- /lightbox-panel --&gt;
  &lt;div id="lightbox"&gt; &lt;/div&gt;&lt;!-- /lightbox --&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code> * /Lightbox background */
   #lightbox {
   display:none;
   background:#000000;
   opacity:0.9;
   filter:alpha(opacity=90);
   position:absolute;
   top:0px;
   left:0px;
   min-width:100%;
   min-height:100%;
   z-index:1000;
  }
   /* Lightbox panel with some content */
   #lightbox-panel {
    display:none;
    position:fixed;
    top:100px;
    left:50%;
    margin-left:-200px;
    width:400px;
    background:#AFFFFF;
    padding:10px 15px 10px 15px;
    border:2px solid #CCCCCC;
    z-index:1001;
  }
  </code></pre>
  
  <p>The <a href="http://jsfiddle.net/zhshqzyc/HjCyA/" rel="nofollow">demo</a> is prefect of course.</p>
  
  <p>However if we remove the CSS for lightbox, <a href="http://jsfiddle.net/zhshqzyc/HjCyA/1/" rel="nofollow">http://jsfiddle.net/zhshqzyc/HjCyA/1/</a>
  the form didn't change at all. I just wonder what is the function of the CSS of lightbox?</p>