网页内容的优先级，并将一个元素放在另一个元素的前面

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;">

非常感谢。