title: HTML z-index and positioning
body: <p>I'm trying to make a html/css based poker program and at the moment im trying to figure out how I am going to put the chips on the table or move my chat window on table.</p>
  
  <p>my code is in index.html</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="content"&gt;
          &lt;div id="table"&gt;
              &lt;div id="boardImage"&gt;&lt;img src="./img/poker_table_new.png" /&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="chat"&gt;
              &lt;textarea id="chatBox"&gt;&lt;/textarea&gt;
              &lt;input id="message" type="text"&gt;
              &lt;input id="sendButton" type="submit" value="Send"&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p>and in CSS</p>
  
  <pre><code>#content {
      position:relative;
      z-index:-1;
  }
  #table {
      position:inherit;
      z-index:-1;
  }
  
  #chat {
      z-index:2;
      position:inherit;
      left:500px;
  
  }
  #boardImage {
      position:inherit;
      z-index:-1;
  }
  #chatBox {
      position:inherit;
      z-index:2;
      width: 300px;
      height: 300px;
  
  }
  </code></pre>
  
  <p>and basically im trying to move the chatbox on my table picture, but it is not moving on top of it.</p>
  
  <p>im not sure if i should use position relative for my poker program? or am i using the z-index correctly? must i put the z-index for all the divs? </p>
  
  <p>at the moment there is a poker table on top of the html and when i scroll down, there is my chatbox, but they should be on eachother.</p>
  
  <p>do i have too much same code? too much writing z-index? and positioning for my poker program, must i move everything with pixels and which would be the best positioning way to go? later on i must start moving chips and cards on table etc.</p>
  
  <p>picture: <img src="https://i.stack.imgur.com/syZmQ.png" alt="enter image description here"></p>