HTML5: как переместить div внутри другого объекта? - PullRequest
Новая
       1

HTML5: как переместить div внутри другого объекта?

0 голосов
/ 15 ноября 2011

Мне нужно переместить 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>

div "uno" всегда ниже "due" ... что я делаю не так?

Ответы [ 2 ]

1 голос
/ 15 ноября 2011

Что, если вы используете 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>
0 голосов
/ 15 ноября 2011

Как вы написали свой код, div due всегда будет ниже uno div.

Если вы хотите, чтобы due div был внутри uno div, вам нужно поставитьвнутри uno div: 

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

Если вы хотите, чтобы они появлялись рядом, вам нужно использовать некоторые теги CSS. W3schools содержит руководства по этому вопросу

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...