title: Clicking through layers/divs
body: <p>If I have two layers on a page, split horrizontally, with the second layer overlapping part of the first layer, is it possible to make it "click through"?</p>
  
  <p>I have links in the first layer, which the second layer overlaps, which stops the links from being clickable. Is there a way to make the layer display, but be click through, while still having it's own links clickable?</p>
  
  <p>edit:</p>
  
  <p>Here is an example, with html and a stylesheet.</p>
  
  <p>The test links become unclickable when inline with the header in Layer3, but below that they are fine. Is there a way to rectify this?</p>
  
  <p></p>
  
  <pre><code>&lt;title&gt;Test&lt;/title&gt;
  &lt;link rel="stylesheet" href="test.css" type="text/css"&gt;
  &lt;body&gt;
  &lt;div id="Layer0"&gt;
  &lt;div id="Layer1" class="Layer1"&gt;
  &lt;h3 align="left"&gt;Brands&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div id="Layer2" class="Layer2"&gt;&lt;h1&gt;TEST&lt;/h1&gt;
  &lt;div id="rightlayer"&gt;
  &lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;&lt;a href="test"&gt;TEST&gt;&lt;/a&gt;&lt;p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="Layer3" class="Layer3"&gt;&lt;h1&gt;Ed Hardy Auctions&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the css</p>
  
  <pre><code>#Layer0 {
      width:100%;
      height:100%;
  }
  body {
      margin:10px 10px 0px 10px;
      padding:0px;
      color:#999999;
      font-family:"Trebuchet MS",arial,sans-serif;
      font-size:70.5%;
  }
  #Layer1 {
      position:absolute;
      left:10px;
      width:200px;
      margin-top:17px;
      font-size:1.0em;
      padding-left:12px;
      padding-top:8px;
  }
  #Layer2 {
      background:#fff;
      margin-left:199px;
      color:#000;
  }
  
  #rightlayer {
  float:right;
  }
  .Layer3 {
  position:absolute;
  top:67%;
  padding:20px;
  width: 100%;
  }
  </code></pre>