Подскажите почему при сортировке уползают div'ы count и delс абсолютной позицией? Они же созданы не с li, но в ul.Если причина в этом, то не пойму логику, как вытащить div'ы из цикла. top в стиле вообще на них не влияет. Код (Text): <html> <head> <meta charset="UTF-8"> <title></title> <style> li { height: 50px; list-style-type: none; border: 1px solid blue; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; overflow:hidden; vertical-align: middle; margin:10px; background-color: white; padding:10px; } ul { margin-left: 15px; margin-right: 15px; padding-left: 15px; padding-right: 15px; } div.messages { border: 1px solid blue; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding:10px; /* height: 500px; overflow-y: scroll;*/ position: relative; } div.add_message { border: 1px solid blue; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding:10px; left: 10px; background-color: white; } div.count { position: absolute; width: 30px; height: 70px; left: 10px; background-color: white; border: 1px solid blue; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; text-align: center; vertical-align: middle; line-height: 70px; } div.del { border: 1px solid blue; position: absolute; width: 30px; height: 70px; right: 10px; } #myProgress { width: 100%; background-color: #ddd; margin-top: 30px; } #myBar { width: 0%; height: 5px; background-color: #4CAF50; } </style> <script src="jquery-3.3.1.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(document).ready(function () { $('ul').sortable({ axis: 'y', stop: function (event, ui) { var data = $(this).sortable('serialize'); $('span').text(data); /*$.ajax({ data: oData, type: 'POST', url: '/your/url/here' });*/ } }); }); </script> <script> function move() { var elem = document.getElementById("myBar"); var width = 0; var id = setInterval(frame, 100); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } } </script> </head> <body> <table width="100%"> <tbody> <tr> <td> <div class="messages" > <?php $servername = "localhost"; $username = "root"; $password = "vfrcbvev"; $dbname = "messengers"; $conn = new mysqli($servername, $username, $password, $dbname); $conn->set_charset("utf8"); if ($conn->connect_error) { die("База недоступна: " . $conn->connect_error); } $count = 1; $sql = "SELECT id_mess, body_mess FROM messages"; $result = $conn->query($sql); echo "<ul id=\"sortable\">"; if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { echo "<div class=\"count\">" .$count++. "</div>"; $link = "del_mess.php?id_mess=" . $row["id_mess"]. ""; echo "<li id=\"id_mess-" . $row["id_mess"]. "\"> " . $row["body_mess"]. ""; echo "<div id=\"myProgress\"><div id=\"myBar\"></div></div></li>"; echo "<div class=\"del\"><a href='".$link."'><img src=\"del.png\" width=\"25\" height=\"25\"></a></div>"; } } else { echo "0 results"; } echo "</ul>"; $conn->close(); ?> </div> </td> </tr> <tr> <td> <div class="add_message"> <form action="add_mess_old.php" method="post"> <table width="100%"> <tbody> <tr> <td width="15%" align="center"><label for="body_mess">Добавить сообщение:</label></td> <td width="70%" align="center"><input style="width: 100%;" type="text" name="body_mess" id="body_mess" autocomplete="off"></td> <td width="15%" align="center"><input type="submit" value="Добавить"></td> </tr> </tbody> </table> </form> </div> </td> </tr> </tbody> </table> Тест запроса в базу: <span></span> <button onclick="move()">Click Me</button> </body> </html>
если дадите ссылку на веб-сайт, на котором работает этот код, будет чуть-чуть проще вам помочь для тестирования, как изменение свойств css меняет отображение на экране удобно использовать "инспектор" в смотрелке сайтов firefox позиция absolute может считаться относительно слоя с позицией relative