2013-05-13 3 views
0

Когда я пытаюсь разместить элементы как статические html-тексты, все работает, но когда я пытаюсь разместить элементы во время выполнения (массивы данных с сервера), у меня есть позиционирование позиции как absolute. Простейший пример для воспроизведенияПозиция абсолютная проблема

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Positioning</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style type="text/css"> 
     body { font-family: Verdana, Tahoma, sans-serif; font-size: 14px } 
     div { border: 1px solid black } 
     .div5 { float: left; width: 300px; height: 300px; } 
     .div6 { width: 100px; height: 100px; position: absolute; top: 50px; left: 50px; background-color: #F5D8C1 } 
     .div9 { width: 20px; height: 20px; position: absolute; bottom: 20px; left: 20px; background-color: #D8F5C1 } 
    </style> 
</head> 
<body> 
    <div id="content"></div> 
    <script type="text/javascript" language="JavaScript"> 
     function setDivValue($divId, $value) 
     { 
      var divL = document.getElementById($divId); 
      if (divL) 
       divL.innerHTML = $value; 
     } 

     var rtext = "<h1>Position absolute test</h1>"; 
     for (var i = 0; i < 10; i++){ 
      rtext += "<div class='div5' id='" + i + "'>" + 
          "<div class='div6'>div6</div>" + 
          "<div class='div9'>div9</div>" + 
         "</div>"; 
     } 
     setDivValue("content", rtext); 
    </script> 
</body> 
</html> 

его размещения div6 и div9 не родительский элемент div5, но позиционирование окна в обоих FF 20 и IE 8 (так что это не браузер, связанных с ошибкой, кажется).

Можно ли это решить? Мне нужно разместить, например, изображения в div6 и поместить текст в div9 прямо над левым верхним углом изображения (внутри).

+0

Если вы создаете JsFiddle файл, он будет легко, чтобы помочь вам. –

+0

JsFiddle заставляет меня расколоть все (html, css, js), и когда я это делаю, ничего не работает. – user2091150

+0

Пусть будет так. По крайней мере, мы можем видеть код. –

ответ

1

Попробуйте добавить эти CSS:

#content{position:relative;} 
+0

Теперь все 10 элементов типа div6 и div9 расположены в верхней части страницы, а не внутри каждых 10 div5, как и должно быть по doc в позиции 'absolute' - позиционирование к родительскому элементу. – user2091150

+0

Идея с 'position: relative;' была хорошей, за исключением того, что она должна быть установлена ​​в 'div5' (родительский элемент для' div6' и 'div9'). Я поставлю в качестве ответа, и вы сможете изменить свой пост :) – user2091150

Смежные вопросы