title: Hiding a image under the div
body: <p>Take a look at this screenshoot first:</p>
  
  <p><img src="https://i.stack.imgur.com/Wm1qL.png" alt="enter image description here"></p>
  
  <p>That white box is ON the orange background, I want it to be under it exactly as pointed with the arrow. The rest should be visible of course: it should just hide this from being on the orange background.</p>
  
  <p>Here is the orange background style and the white box itself:</p>
  
  <p>Orange background:</p>
  
  <pre><code>body {
      margin: 0;
      padding: 0;
      background: url("../img/back.png") repeat-x top #fff;
      text-align: left;
      color: #8a5225;
  }
  </code></pre>
  
  <p>White box:</p>
  
  <pre><code>#box {
      background: url("../img/box.png") no-repeat;
      width: 163px;
      height: 41px;
      float: right;
      position: relative;
  }
  </code></pre>
  
  <p>Hope you give me some solutions for that. I've been trying using the <code>z-index</code> but it doesn't bring any results...</p>