Question

我需要在另一个对象中移动一个div。我有以下html页面：

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.min.js"></script>
</head>
<body>
    <div id="uno" style="position:absolute;top:0px;left:0px;z-index:9999">
        Lorem ipsum bla bla bla<br />
        Lorem ipsum bla bla bla<br />
        Lorem ipsum bla bla bla<br />
    </div>
    <div id="due" style="position:relative;z-index:0">
        <embed src="test.pdf" style="width:500px;height:500px"/>
    </div>

    <br />
    <input type="button" id="btn" value="Clicca" />
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btn").click(function () {
            $("#uno").animate({ marginLeft: "+=20px", marginTop:"+=100px"},1000);
        });
    });
 </script>

“uno”div始终低于“到期”......我做错了什么？

Answer 1

如果你使用iframe而不是像这样的嵌入怎么办，那么文本会覆盖pdf。

    <div id="uno" style="position:absolute;top:0px;left:0px;z-index:1; background: #f00;"> 
        Lorem ipsum bla bla bla<br /> 
        Lorem ipsum bla bla bla<br /> 
        Lorem ipsum bla bla bla<br /> 
    </div> 

   <div id="due" style="position:relative;z-index:0; overflow: hidden;"> 
         <iframe src="test.pdf" width="500" height="500"></iframe> 
   </div>

Answer 2

您编写代码的方式due div始终低于uno div。

如果你想要due div中的uno div，那么你需要将它放在uno div中：

<div id="uno">
   <div id="due">
   </div>
</div>

如果您希望它们并排显示，那么您需要使用一些css标签。 W3schools有此指南

Html5：如何在另一个对象中移动div？

2 个答案: