html - 如何在html和css中设置组件顺序

Question

在下面的链接中，您可以看到单击按钮时会弹出一个菜单，但红点将保留在菜单顶部。

请帮助我了解当菜单在上面时如何保持菜单后面的红点。

.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

您可以使用 z-index 属性来定义元素应放置在哪个“层”上。例如，在 .uiRadioButton:after 上使用 z-index:-1 将其置于菜单下方。

如果您熟悉 Photoshop 或类似程序，您就已经知道 z-index 的概念。为了更好地理解，请查看以下内容:

也可以看看 http://www.w3schools.com/cssref/pr_pos_z-index.asp了解更多详情。

希望对您有所帮助!

干杯，丹