title: having trouble with z-index on divs working. is it jsfiddle?
body: <p>I'm trying to get some divs to move around, based upon clicks that go on.  The divs I'm trying to move should be at the same level within the parent/child domain.  I have my code here:</p>
  
  <p><a href="http://jsfiddle.net/trout0525/L2hhof79/3/" rel="nofollow">http://jsfiddle.net/trout0525/L2hhof79/3/</a></p>
  
  <pre><code>&lt;body&gt;    
  &lt;div id="startboard"&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;center&gt;
          &lt;span class="F11Notice"&gt;
              Please right-click top menu bar blank area to&lt;br&gt;
              make sure the status bar is not selected&lt;br&gt;
              then press F11&lt;br&gt;
              to turn-off the top tool bars&lt;br&gt;
              This provides a proper interface for the game
          &lt;/span&gt;
      &lt;/center&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;center&gt;
          &lt;form&gt;
              &lt;input type="checkbox" name="team" value="1"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="text" class="teamEntry" name="team1" value="Team1"&gt;&lt;br&gt;
              &lt;input type="checkbox" name="team" value="2"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="text" class="teamEntry" name="team2" value="Team2"&gt;&lt;br&gt;
              &lt;input type="checkbox" name="team" value="3"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="text" class="teamEntry" name="team3" value="Team3"&gt;&lt;br&gt;
              &lt;input type="checkbox" name="team" value="4"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="text" class="teamEntry" name="team4" value="Team4"&gt;&lt;br&gt;
              &lt;input type="checkbox" name="team" value="5"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="text" class="teamEntry" name="team5" value="Team5"&gt;&lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;input type="button" value="Start" id="startButton" onclick="startGame()"&gt;
          &lt;/form&gt;
      &lt;/center&gt;
  &lt;/div&gt;
  
  &lt;div id="scoreBoard"&gt;
      &lt;span id = "totalFor1"&gt;
          Team 1&lt;br&gt;
          $0
      &lt;/span&gt;&lt;br&gt;
      &lt;span id = "totalFor2"&gt;
          Team 2&lt;br&gt;
          $0
      &lt;/span&gt;&lt;br&gt;
      &lt;span id = "totalFor3"&gt;
          Team 3&lt;br&gt;
          $0
      &lt;/span&gt;&lt;br&gt;
      &lt;span id = "totalFor4"&gt;
          Team 4&lt;br&gt;
          $0
      &lt;/span&gt;&lt;br&gt;
      &lt;span id = "totalFor5"&gt;
          Team 5&lt;br&gt;
          $0
      &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="gameboard"&gt;
      &lt;div id="pointsCol1"&gt;
          &lt;div id="100pointsCol1" class="boardValue"&gt;$100&lt;/div&gt;
          &lt;div id="200pointsCol1" class="boardValue"&gt;$200&lt;/div&gt;
          &lt;div id="300pointsCol1" class="boardValue"&gt;$300&lt;/div&gt;
          &lt;div id="400pointsCol1" class="boardValue"&gt;$400&lt;/div&gt;
          &lt;div id="500pointsCol1" class="boardValue"&gt;$500&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="pointsCol2"&gt;
          &lt;div id="100pointsCol2" class="boardValue"&gt;$100&lt;/div&gt;
          &lt;div id="200pointsCol2" class="boardValue"&gt;$200&lt;/div&gt;
          &lt;div id="300pointsCol2" class="boardValue"&gt;$300&lt;/div&gt;
          &lt;div id="400pointsCol2" class="boardValue"&gt;$400&lt;/div&gt;
              &lt;div id="500pointsCol2" class="boardValue"&gt;$500&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="questionWindow"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And CSS to go with it:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #startboard{
      z-index: 100;
      position: absolute;
      float: left;
      top: 0px;
      left: 0px;
      width: 768px;
      height: 512px;
      overflow: hidden;
      background-color: black; 
  }
  
  .F11Notice {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: orange;
  text-align: center;
  }
  
  .teamEntry {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 24px;
  }
  
  #scoreBoard {
      z-index: 2;
      position: absolute;
      float: left;
      top: 0px;
      left: 0px;
      width: 50px;
      height: 200px;
      color: yellow;
      background-color: blue;
  }
  
  #gameboard {
      z-index: 2;
      position: relative;
      float: left;
      top: 0px;
      left: 50px;
      width: 400px;
      height: 200px;
      background-color: red;
  }
  
  .boardValue {
      position: relative;
      float: left;
      width: 100px;
      height: 40px;
      line-height: 40px;
      vertical-align: middle;
      text-align: center;
      color:green;
      font-family: Elephant, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 14px;
      background: transparent;
      box-sizing: border-box;
      border: 2px white solid;
  }
  
  .boardValue:hover {
      background-color: #cccccc;
      color: black;
  }
  
  
  
  #pointsCol1 {
      position: absolute;
      float: left;
      width: 150px;
      height: 200px;
      top: 0px;
      left: 50px;
      background: yellow;
      box-sizing: border-box;
      border: 1px green solid;
  }
  
  #100pointsCol1 {
      top: 0px;
      left: 0px;
  }
  
  #200pointsCol1 {
      top: 40px;
      left: 0px;
  }
  
  #300pointsCol1 {
      top: 80px;
      left: 0px;
  }
  
  #400pointsCol1 {
      top: 120px;
      left: 0px;
  }
  
  #500pointsCol1 {
      top: 160px;
      left: 0px;
  }
  
  #pointsCol2 {
      position: absolute;
      float: left;
      width: 150px;
      height: 200px;
      top: 0px;
      left: 200px;
      background: purple;
      box-sizing: border-box;
      border: 1px green solid;
  }
  
  #100pointsCol2 {
      top: 0px;
      left: 0px;
  }
  
  #200pointsCol2 {
      top: 40px;
      left: 0px;
  }
  
  #300pointsCol2 {
      top: 80px;
      left: 0px;
  }
  
  #400pointsCol2 {
      top: 120px;
      left: 0px;
  }
  
  #500pointsCol2 {
      top: 160px;
      left: 0px;
  }
  
  #questionWindow {
      z-index: 1;
      position: absolute;
      float: left;
      width: 512px;
      height: 256px;
      padding: 0px;
      margin: 0px;
      top: 0px;
      left:0px;
      border: 0px none;
      background: white;
  }
  </code></pre>
  
  <p>Here's a bit of JavaScript:</p>
  
  <pre><code>var selectionName= [
      "100pointCol1","200pointCol1","300pointCol1","400pointCol1","500pointCol1",
      "200pointCol1","200pointCol2","300pointCol2","400pointCol2","500pointCol2"
  ];
  
  var teamSelection = {};
  teamSelection['1'] = {};
  teamSelection['2'] = {};
  teamSelection['3'] = {};
  teamSelection['4'] = {};
  teamSelection['5'] = {};
  
  teamSelection['1']['Selected'] = false;
  teamSelection['2']['Selected'] = true;
  teamSelection['3']['Selected'] = false;
  teamSelection['4']['Selected'] = false;
  teamSelection['5']['Selected'] = false;
  
  teamSelection['1']['Score'] = 0;
  teamSelection['2']['Score'] = 0;
  teamSelection['3']['Score'] = 0;
  teamSelection['4']['Score'] = 0;
  teamSelection['5']['Score'] = 0;
  
  
  
  window.onload = function() {
      $(function(){
          for (var i=0; i &lt; selectionName.length; i++) {
              selection = selectionName[i];
              $("#" + selection).bind("click", {sName: selection}, makeSelection);
          }
      });
  }
  
  function makeSelection(event) {
      selection = event.data.sName;
  
      $("#" + selection).unbind("click");
      openQuestion(selection);
  }
  
  function startGame() {
      $("#scoreboard").css("z-index", 100);
      $("#gameboard").css("z-index", 100);
      $("#startboard").css("z-index", 1);
  }
  
  function openQuestion(selection) {
      $("#scoreboard").css("z-index", 1);
      $("#gameBoard").css("z-index",1);
      $("#questionWindow").css("z-index",100);
  }
  </code></pre>
  
  <p>Please try it out on JSFiddle:</p>
  
  <p><a href="http://jsfiddle.net/trout0525/L2hhof79/3/" rel="nofollow">http://jsfiddle.net/trout0525/L2hhof79/3/</a></p>
  
  <p>It is supposed to show the startboard, then after clicking start, it hides the startboard, and that appears to work, but then it's supposed to bring up the scoreboard and gameboard, and those do show, but then when you click on a dollar amount, it's supposed to bring up the question window.  Is it my code or JSFiddle, for it seems to work when I'm not using JSFiddle and use it locally.  I'm just worried my code is incorrect, as I have further questions to bring up after I get this simple series of actions working.  So, basically, is it JSFiddle not working right, or is my code wrong?</p>