Javascript HTML嵌入标记覆盖导航栏中的div标记_Javascript_Html_Css

Javascript HTML嵌入标记覆盖导航栏中的div标记

javascript html css

Javascript HTML嵌入标记覆盖导航栏中的div标记,javascript,html,css,Javascript,Html,Css,我正在为计算机网络课程设计一个静态网站。学生可以从网站下载PDF格式的作业文件，我使用嵌入标签在线显示文件，问题是嵌入元素总是覆盖导航栏中的div标签，z-index css属性是无用的。那么，有没有人可以提供一些有用的方法来解决这个问题？谢谢我的导航条HMTL是： <div id="Navsun"><a href="NewCourseIntr.html">CourseIntroduction</a> <div id="secondnav"

我正在为计算机网络课程设计一个静态网站。学生可以从网站下载PDF格式的作业文件，我使用嵌入标签在线显示文件，问题是嵌入元素总是覆盖导航栏中的div标签，z-index css属性是无用的。那么，有没有人可以提供一些有用的方法来解决这个问题？谢谢

我的导航条HMTL是：

<div id="Navsun"><a href="NewCourseIntr.html">CourseIntroduction</a>
      <div id="secondnav">
       <ul id="menu">
         <li><a href="Team.html" class="subsun">Team</a></li>          
         <li><a href="TeachFundation.html" class="subsun">Foundation</a></li>
         <li><a href="TeachContent.html" class="subsun">Content</a></li>
       </ul>
      </div>
   </div>

嵌入元素是：

<div id="pdfDiv">
<embed width="99%" height="510px;" src="homework1.pdf" id="PdfShow1" type="application/pdf" style="margin-left:2px;display:block;"/>
</div>

我的HTML文件概述如下：

<!DOCTYPE html>
<html>
<head>
<title>Computer Networks</title>
</head>
<body>
<div id="nav">
 <!--Navigation bar is here-->
</div>
<div id="pdfDiv">
<embed width="99%" height="510px;" src="homwork1.pdf" id="PdfShow1" type="application/pdf" style="margin-left:2px;display:block;"/>
</div>
<div id="footer">

</div>
</body>
</html>


计算机网络

结果如下：

您可以将PDF文档嵌入iframe中，并将ifram放在div旁边/里面。这将为您提供对div的控制。

下面是一个例子，

`z-index`css属性是无用的`你怎么知道这样呢？？？当鼠标在div区域时，我使用伪类动态更改导航栏的div'z-index'值。谢谢你的评论

<!DOCTYPE html>
<html>
<head>
<title>Computer Networks</title>
</head>
<body>
<div id="nav">
 <!--Navigation bar is here-->
</div>
<div id="pdfDiv">
<embed width="99%" height="510px;" src="homwork1.pdf" id="PdfShow1" type="application/pdf" style="margin-left:2px;display:block;"/>
</div>
<div id="footer">

</div>
</body>
</html>