javascript - Div每次刷新页面时都会更改位置

屏幕右侧是带有div的#popular，其中包含作者姓名。每当我更改分页页面时，它就会上下移动。我不知道为什么，但是很头疼。

这是我的代码

的CSS

 .item {
    position: absolute;
    margin:10px;
    margin-top:40px;
    margin-left:0px;
    margin-right:10px!important;
    width:  300px;
    height: auto;
    float: left;
    background: #ffff;
    font-size:20px !important;
    text-align:center;
    display: block;
    line-height: 1.42857143;
   -webkit-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
   -moz-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
    box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
   -webkit-filter: grayscale(00%);
   -moz-filter: grayscale(00%);
   -o-filter: grayscale(00%);
   -webkit-transition: all 0.1s ease;
   -moz-transition: all 0.1s ease;
   -o-transition: all 0.1s ease;
   -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
  }

      .item:hover {
       -webkit-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
       -moz-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
        box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
       -webkit-transform: scale(1.005);
       -moz-transform: scale(1.005);
       -ms-transform: scale(1.005);
      -o-transform: scale(1.005);
       transform: scale(1.005);

       }
 .char a{
    color:white;
}
    #masonry{
height:auto; !important;
width:91.5% !important;


   }
  #popular{
      position:relative;
      margin-right: 10px;
      margin-left: 1750px;
      margin-top: -1000px ;
      margin-bottom:100px;
      float: left;
          }

HTML和PHP

     <div id='masonry'>


      <?php

        //show records
        $query = mysqli_query($db,"SELECT * FROM {$statement} LIMIT  {$startpoint} , {$limit}");

        if($query === FALSE) {
        die(mysqli_error($db)); // TODO: better error handling
                          }
        $count=1;

        while ($row = mysqli_fetch_assoc($query)) {
            $quote=$row['quote'];
            $name =$row['name'];

    ?>
    <div class="item">
     <?php echo "{$quote}";?><br>
      <?php echo "Author:- {$name}";?>
      </div>
      <?php
    $count++;
    }
    ?>

     </div>

     <script src='masonry.pkgd.min.js'></script>
     <script>
      var container = document.querySelector('#masonry');
      var masonry = new Masonry(container, {
      columnWidth: 50,
     itemSelector: '.item'
      });
      </script>

  <?php echo pagination($statement,$limit,$page);?>
  <div id = "popular">
   <span> <h3> Popular Author </h3></span>
  <?php
     //show records
        $query1 = mysqli_query($db,"SELECT * FROM `author` WHERE popular = 1 order by name LIMIT 40");

        if($query1 === FALSE) {
     die(mysqli_error($db)); // TODO: better error handling
                         }
        $count=1;

        while ($row = mysqli_fetch_assoc($query1)) {

            $name =$row['name'];
            $id   =$row['id'];

    ?>
    <div class="pop1"  >


<a      href="quotes.php?auth_id=<?php echo "$id";?>"><?php echo "$name";?></a>


</div>


   <?php
    $count++;
    }
    ?>
</div>

最佳答案

由于代码无法重现问题，因此很难说出到底是什么引起了问题。

但是，只需查看#popular ...

#popular {
   position:relative;
   margin-right: 10px;
   margin-left: 1750px;
   margin-top: -1000px ;
   margin-bottom: 100px;
   float: left;
   }

...我建议如下：

尝试删除（或减少）那些巨大的边距空间。 margin-left: 1750px可能不是将#popular定位在右侧的最佳方法。

您是否想使用right，left，top和bottom offset properties，而不是它们的margin-对应项？

无论如何，一旦您控制了边距，请尝试使用float: right而不是float: left。

另外，如果您的目标是将#popular定位在屏幕上的某个位置，请尝试绝对定位。

#popular {
   position: absolute;
   right: ?px;
   left: ?px;
   top: ?px ;
   bottom: ?px;
   }

确保将position: relative应用于#popular的容器。

您可能想查看这些文章以获得一些好的信息：


MDN position
Absolute, Relative, Fixed Positioning: How Do They Differ?

关于javascript - Div每次刷新页面时都会更改位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34240356/