網頁中內容的優先級，並將一個元素放在另一個元素之前

Question

我對網頁內容的優先級有疑問。 我的意思是我希望一個組件位於另一個組件的前面。 當我將鼠標懸停在水平菜單上時，我希望下拉菜單位於其他組件的前面

我希望它位於其他類似組件的前面：

這是我用來編寫此下拉菜單的代碼：

<div id="horizontalmenu">
<ul>
<li><a href="#">اخبار</a>
<ul>
<li><a href="http://es.sums.ac.ir/newsGilrsElementary">ابتدایی دخترانه</a></li>
<li><a href="http://es.sums.ac.ir/newsGilrsGuidance">راهنمایی دخترانه</a></li>
<li><a href="http://es.sums.ac.ir/newsGilrsHigh">دبیرستان دخترانه</a></li>
<li><a href="http://es.sums.ac.ir/newsBoysElementary">ابتدایی پسرانه</a></li>
<li><a href="http://es.sums.ac.ir/newsBoysGuidance">راهنمایی پسرانه</a></li>
<li><a href="http://es.sums.ac.ir/newsBoysHigh">دبیرستان پسرانه</a></li>
</ul>
</li>
</ul>
</div>
<style type="text/css" media="screen"><!--
#horizontalmenu ul { padding:1; margin:1; list-style:none; }    
#horizontalmenu ul a{ padding:1; margin:1; list-style:none; color:white;}   
        #horizontalmenu li { float:left; position:relative; padding-right:200; display:block;} 
        #horizontalmenu li ul { display:none; position:absolute; width:200px; background:#9a2d91;} 
        #horizontalmenu li:hover ul{ display:block; height:auto; width:200px;background:#9a2d91; } 
        #horizontalmenu li ul li{ clear:both; border-style:none; width:200px;background:#9a2d91;}
--></style>

有人可以幫我嗎？

Answer 1

CSS：

#horizontalmenu { z-index: 10; }

z-index代表“海拔”，數字越大，海拔越高。 默認值為0。

Answer 2

嘗試這個：

<div id="div1">
      <img src="http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Apps-HTML-5-Metro-icon.png"/>
      <div id="div2">
           <img src="http://penta2.ufrgs.br/edutools/composer/tutcomposer3.gif"/>
      </div>
</div>
<style type="text/css">
#div1 {
    position:relative; 
    top:0px; 
    left:0px;
}
#div2 {
    position:absolute; 
    top:60px; 
    left:6px;
}

Answer 3

問題來自z-index，答案是在li標簽中添加z索引，例如

<li style="z-index: 98;">

非常感謝。