How to set components order in html and css

Question

In the following link you can see when clicking the buttons, a menu will pop but the red spot will stay on top of the menu.

Please help me understand how to keep the red spot behind the menu when the menu is above.

.divMenu
{
    float: left;
    position: fixed;
    top: 350px;
}



.uiBarButton {
  //position:absolute;
  width: 100px;
  height: 50px;
  border: black;
  padding: 0px;
  border: 2px solid red;
   

  /*override chrome default*/ }
  .uiBarButton:hover:not([disabled="disabled"]) {
    box-shadow: 0px 0px 2px 1px #18BECD;
    /*create a shadow: location, location, blur, Spread, color*/
   position: relative;
    /* position + z : cast the shadow above the other elements*/
    z-index: 1; }


    
.uiMenu {
  margin: 0;
  padding: 0;
  border: 1px solid #18BECD;
  display: none;
  position: absolute; 
  

  }
  .uiMenu:hover .uiMenuItem:hover > .uiSubMenu {
    display: block; 
    }

.uiMenuUL {
  margin: 0;
  padding: 0; }

.uiMenuItem {
  position: relative;
  list-style: none;
  background: #E2E2E2;
  display: block;
  color: #333;
  text-decoration: none;
  line-height: 20px;
  padding: 0 10px;
  font-size: 11px;
  font-family: Arial;
  white-space: nowrap; }
  .uiMenuItem:hover:not([disabled="disabled"]) {
    background: #FFFAFA;
    z-index: 15; }
  .uiMenuItem.emptyli:hover {
    background: #E2E2E2; }
  .uiMenuItem.uiSubMenu {
    padding: 0;
    display: none;
    position: absolute;
    left: 100%;
    top: -1px;
    border-radius: 0px;
    border: 1px solid #18BECD;
    float: none; }
    
    

.uiRadioButton {
  border-style: solid;
  border-color: #92AFCF;
  border-width: 1px;
  border-radius: 15px;
  vertical-align: text-bottom;
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin-right: 10px;
  left:150px;
  -webkit-appearance: none; }
  .uiRadioButton:after {
    background-color: red;
    border-radius: 15px;
    content: '';
    display: block;
    height: 9px;
    left: 150px;
    position: relative;
    top: 2px;
    width: 9px; 
    }
  .uiRadioButton:checked:after {
    left:150px;
    background-color: red; }
  .uiRadioButton:focus {
    outline: none;
    left:150px;
    border: 1px solid #18BECD; }

    

<div>
<div class="sidebar" style="float:left; width:100px; position:fixed; top:100px ">

 <div> 


<style>.uiMenu:hover,.uiBarButton:focus ~ .uiMenu
  {
    display: inline-flex; 
    left:100%;
    position: relative;
    
  }
</style>


<button type="button" id="btOpt" data-tag="0" class="uiBarButton">
 <div>Click here</div>
</button>



<nav class="uiMenu" id="popOpt" data-tag="0" style="bottom:50px">
<div style="float:left">
<ul class="uiMenuUL" style="border-right: 1px solid lightgrey">
  <li class="uiMenuItem" id="miImages" data-tag="0">1. Images</li>
  <li class="uiMenuItem" id="miVideo" data-tag="0">2. Training Video</li>
  <li class="uiMenuItem" id="miVoiceInstructions" data-tag="0">3. Voice/Instructions</li>
  <li class="uiMenuItem" id="N4Documents1" data-tag="0">4. Documents (List)</li>
  <li class="uiMenuItem" id="PriceTable1" data-tag="0">5. P/N Price Table</li>
  <li class="uiMenuItem" id="APriceList1" data-tag="0">6. Cust/Vend Price List
    <ul class="uiMenuItem uiSubMenu"><li class="uiMenuItem" id="CVendorsCostList1" data-tag="0">1. Vendors Cost List</li>
      <li class="uiMenuItem" id="N2CustomersPriceList1" data-tag="0">2. Customers Price List</li>
    </ul>
  </li>
  <li class="uiMenuItem" id="PNCategories1" data-tag="0">7. P/N Categories</li>
  <li class="uiMenuItem" id="miCapabilityCodes" data-tag="0">8. Capabilities</li>
  <li class="uiMenuItem" id="N5PNExtendedInfo1" data-tag="0">9. P/N Extended Info</li>
  <li class="uiMenuItem" id="GeneralLedgerGL1" data-tag="0">A. General Ledger Default Tables (GL Codes)</li>
  </ul>
  </div>
 
  </nav>
  </div>
  
  
  
<div >
  


<style>.uiMenu:hover,.uiBarButton:focus ~ .uiMenu
  {
    display: inline-flex; 
    left:100px;
    position: absolute;
  }
</style>


<button type="button" id="btOpt" data-tag="0" class="uiBarButton">
 <div></div>
</button>



<nav class="uiMenu" id="popOpt" data-tag="0" style="bottom:0px">
<div style="float:left">
<ul class="uiMenuUL" style="border-right: 1px solid lightgrey">
  <li class="uiMenuItem" id="miImages" data-tag="0">11. Images</li>
  <li class="uiMenuItem" id="miVideo" data-tag="0">21. Training Video</li>
  <li class="uiMenuItem" id="miVoiceInstructions" data-tag="0">31. Voice/Instructions</li>
  <li class="uiMenuItem" id="N4Documents1" data-tag="0">41. Documents (List)</li>
  <li class="uiMenuItem" id="PriceTable1" data-tag="0">51. P/N Price Table</li>
  <li class="uiMenuItem" id="APriceList1" data-tag="0">61. Cust/Vend Price List
    <ul class="uiMenuItem uiSubMenu"><li class="uiMenuItem" id="CVendorsCostList1" data-tag="0">1. Vendors Cost List</li>
      <li class="uiMenuItem" id="N2CustomersPriceList1" data-tag="0">2. Customers Price List</li>
    </ul>
  </li>
  <li class="uiMenuItem" id="PNCategories1" data-tag="0">71. P/N Categories</li>
  <li class="uiMenuItem" id="miCapabilityCodes" data-tag="0">81. Capabilities</li>
  <li class="uiMenuItem" id="N5PNExtendedInfo1" data-tag="0">91. P/N Extended Info</li>
  <li class="uiMenuItem" id="GeneralLedgerGL1" data-tag="0">A1. General Ledger Default Tables (GL Codes)</li>
  </ul>
  </div>
 
  </nav>
  </div>
 
</div>
  

  <input type="radio" id="rbSerializedUnique" data-tag="0" class="uiRadioButton" value="U" name="rgSerials" onchange="rgSerialsOnChange(this)">
</input>
  

  
  
  

  

Answer 1

you could use the z-index property to define on which "layer" an element should be placed at. Use for example z-index:-1 on your .uiRadioButton:after to get it beneath the menu.

If you're familiar with Photoshop or similar programs you already know the concept of z-index. for better understanding have a look at this:

also have a look at http://www.w3schools.com/cssref/pr_pos_z-index.asp for more details.

Hope that helps!

Cheers, Dan

Answer 2

Try altering the z-index (more) of the red dot, e.g

.uiRadioButton:after {
    z-index: -1;
}

.divMenu {
    float: left;
    position: fixed;
    top: 350px;
}
.uiBarButton {
    //position:absolute;
    width: 100px;
    height: 50px;
    border: black;
    padding: 0px;
    border: 2px solid red;
    /*override chrome default*/
}
.uiBarButton:hover:not([disabled="disabled"]) {
    box-shadow: 0px 0px 2px 1px #18BECD;
    /*create a shadow: location, location, blur, Spread, color*/
    
    position: relative;
    /* position + z : cast the shadow above the other elements*/
    
    z-index: 1;
}
.uiMenu {
    margin: 0;
    padding: 0;
    border: 1px solid #18BECD;
    display: none;
    position: absolute;
}
.uiMenu:hover .uiMenuItem:hover > .uiSubMenu {
    display: block;
}
.uiMenuUL {
    margin: 0;
    padding: 0;
}
.uiMenuItem {
    position: relative;
    list-style: none;
    background: #E2E2E2;
    display: block;
    color: #333;
    text-decoration: none;
    line-height: 20px;
    padding: 0 10px;
    font-size: 11px;
    font-family: Arial;
    white-space: nowrap;
}
.uiMenuItem:hover:not([disabled="disabled"]) {
    background: #FFFAFA;
    z-index: 15;
}
.uiMenuItem.emptyli:hover {
    background: #E2E2E2;
}
.uiMenuItem.uiSubMenu {
    padding: 0;
    display: none;
    position: absolute;
    left: 100%;
    top: -1px;
    border-radius: 0px;
    border: 1px solid #18BECD;
    float: none;
}
.uiRadioButton {
    border-style: solid;
    border-color: #92AFCF;
    border-width: 1px;
    border-radius: 15px;
    vertical-align: text-bottom;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin-right: 10px;
    left: 150px;
    -webkit-appearance: none;
}
.uiRadioButton:after {
    background-color: red;
    border-radius: 15px;
    content: '';
    display: block;
    height: 9px;
    left: 150px;
    position: relative;
    top: 2px;
    width: 9px;
    z-index: -1;    /* changed line of CSS */
}
.uiRadioButton:checked:after {
    left: 150px;
    background-color: red;
}
.uiRadioButton:focus {
    outline: none;
    left: 150px;
    border: 1px solid #18BECD;
}

<div>
<div class="sidebar" style="float:left; width:100px; position:fixed; top:100px ">

 <div> 


<style>.uiMenu:hover,.uiBarButton:focus ~ .uiMenu
  {
    display: inline-flex; 
    left:100%;
    position: relative;
    
  }
</style>


<button type="button" id="btOpt" data-tag="0" class="uiBarButton">
 <div>Click here</div>
</button>



<nav class="uiMenu" id="popOpt" data-tag="0" style="bottom:50px">
<div style="float:left">
<ul class="uiMenuUL" style="border-right: 1px solid lightgrey">
  <li class="uiMenuItem" id="miImages" data-tag="0">1. Images</li>
  <li class="uiMenuItem" id="miVideo" data-tag="0">2. Training Video</li>
  <li class="uiMenuItem" id="miVoiceInstructions" data-tag="0">3. Voice/Instructions</li>
  <li class="uiMenuItem" id="N4Documents1" data-tag="0">4. Documents (List)</li>
  <li class="uiMenuItem" id="PriceTable1" data-tag="0">5. P/N Price Table</li>
  <li class="uiMenuItem" id="APriceList1" data-tag="0">6. Cust/Vend Price List
    <ul class="uiMenuItem uiSubMenu"><li class="uiMenuItem" id="CVendorsCostList1" data-tag="0">1. Vendors Cost List</li>
      <li class="uiMenuItem" id="N2CustomersPriceList1" data-tag="0">2. Customers Price List</li>
    </ul>
  </li>
  <li class="uiMenuItem" id="PNCategories1" data-tag="0">7. P/N Categories</li>
  <li class="uiMenuItem" id="miCapabilityCodes" data-tag="0">8. Capabilities</li>
  <li class="uiMenuItem" id="N5PNExtendedInfo1" data-tag="0">9. P/N Extended Info</li>
  <li class="uiMenuItem" id="GeneralLedgerGL1" data-tag="0">A. General Ledger Default Tables (GL Codes)</li>
  </ul>
  </div>
 
  </nav>
  </div>
  
  
  
<div >
  


<style>.uiMenu:hover,.uiBarButton:focus ~ .uiMenu
  {
    display: inline-flex; 
    left:100px;
    position: absolute;
  }
</style>


<button type="button" id="btOpt" data-tag="0" class="uiBarButton">
 <div></div>
</button>



<nav class="uiMenu" id="popOpt" data-tag="0" style="bottom:0px">
<div style="float:left">
<ul class="uiMenuUL" style="border-right: 1px solid lightgrey">
  <li class="uiMenuItem" id="miImages" data-tag="0">11. Images</li>
  <li class="uiMenuItem" id="miVideo" data-tag="0">21. Training Video</li>
  <li class="uiMenuItem" id="miVoiceInstructions" data-tag="0">31. Voice/Instructions</li>
  <li class="uiMenuItem" id="N4Documents1" data-tag="0">41. Documents (List)</li>
  <li class="uiMenuItem" id="PriceTable1" data-tag="0">51. P/N Price Table</li>
  <li class="uiMenuItem" id="APriceList1" data-tag="0">61. Cust/Vend Price List
    <ul class="uiMenuItem uiSubMenu"><li class="uiMenuItem" id="CVendorsCostList1" data-tag="0">1. Vendors Cost List</li>
      <li class="uiMenuItem" id="N2CustomersPriceList1" data-tag="0">2. Customers Price List</li>
    </ul>
  </li>
  <li class="uiMenuItem" id="PNCategories1" data-tag="0">71. P/N Categories</li>
  <li class="uiMenuItem" id="miCapabilityCodes" data-tag="0">81. Capabilities</li>
  <li class="uiMenuItem" id="N5PNExtendedInfo1" data-tag="0">91. P/N Extended Info</li>
  <li class="uiMenuItem" id="GeneralLedgerGL1" data-tag="0">A1. General Ledger Default Tables (GL Codes)</li>
  </ul>
  </div>
 
  </nav>
  </div>
 
</div>
  

  <input type="radio" id="rbSerializedUnique" data-tag="0" class="uiRadioButton" value="U" name="rgSerials" onchange="rgSerialsOnChange(this)">