当div超越时，让div移动

Question

我有一个文字，并在一个按钮下切换一些图标。在文本下面有一个分页的div，我设置了一个上边距，把它放在文本下面的正确位置。我之所以这样做是因为我不知道为什么即使它只是在文本之后的html中，没有任何值，它就像主要容器的左角一样绝对是容器是相对的？

问题是当我切换图标时，描述div溢出了分页div。我不知道如何做到这一点。

有什么想法吗？谢谢:)）

＆＃13;

＆＃13;

// Show hide on click

    function showNavi(){
        $("#navigationin").toggle('slow','swing');
      $('#chevron').toggleClass('rotate180');
      $('.rainbow').toggleClass('changecolor')
    };
// Scroll to top
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrolltotop').fadeIn();
		} else {
			$('.scrolltotop').fadeOut();
		}
	});
	
	//Click event to scroll to top
	$('.scrolltotop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});

// Random color
function entryOver(classnm) {
    $(classnm).css('border-color',randomColor({
   luminosity: 'bright',
   format: 'hsl' 
}))
};
function notEntryOver(classnm) {
    $(classnm).css('border-color',"#dadada")
};

// Icons drop down
function iconsFunction() {
  $("#mainicons").toggle(function(){ $(this).animate({height:250},200); },function(){ $(this).animate({height:0},200); });
  $('#avatar i').toggleClass('rotateavatar');
};

  $( function() {
    $( ".about" ).draggable({cursor: "move"});
  } );

＆＃13;

a{
  text-decoration:none
}
/*-- PAGINATION --*/

.pagination {
  margin-top:90%;
  text-align:center
}
   
.pagination a {
margin-bottom:10px;
color:#fff;
background-color:#bababa;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 100%;
line-height: 20px;
    margin-left:5px;
}
   
.pagination a:hover {
color:#58acfa;
background:#fff;
}

.current_page{
  margin-bottom:10px;
    color:{color:Text};
    padding:4px;
    border-bottom:1px solid #58acfa;
    margin-left:5px
}


  /*------ MENU -----*/
  .about{
    cursor:move;
    z-index:1000;
    position:fixed;
    width:300px;
    height:300px;
    left:100px;
    top:60px;
    margin: 0 auto;
    border-radius:5px;
    border:1px solid #bababa;
    background:white;
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
  }


  /* Main icons */

  #mainicons {
    position: absolute;
    top: 60px;
    left: 15px;
    text-align: center;
    opacity:1;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
  }

#mainicons>a {
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}

  #mainicons i {
    display: block;
    height: 20px;
    width: 20px;
    padding: 10px;
    color: #fff;
    background: #bababa;
    border-radius:100%;
    font-size: 16px;
    line-height: 20px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
  }

  #mainicons i:hover {
      background:#fff;
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  
  #mainicons .fa-home:hover{
      color:red;
  }
  #mainicons .fa-comment:hover{
      color:#fe9a2e;
  }
  #mainicons .fa-download:hover{
      color:#37ce00;
  }
  #mainicons .fa-address-card:hover{
      color:#58acfa;
  }

  /* Avatar */

  #avatar {
    position:absolute;
    cursor:pointer;
    margin:10px 0 0 10px;
    width: 50px;
    height: 50px;
    z-index:10;
  }

  #avatar img {
    width: 100%;
    height: 100%;
    border-radius:100%;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  
  #avatar i{
      position:absolute;
      left:0;
      width:101%;
      height:101%;
      border-radius:100%;
      font-size:15px;
      line-height:50px;
      text-align:center;
      color:#bababa;
      opacity:0;
      background:#fff;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  
  #avatar:hover i{
      opacity:1;
  }
  
  .rotateavatar{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);      
  }
  /* Description */

  #description {
    position: absolute;
    overflow:hidden;
    margin:10px 0 0 90px;
    color: #000;
    background: #dadada;
    padding: 2px 10px 2px 10px;
    width:180px;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 18px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  
  #description:after {
content: '';
position: absolute;
border-style: solid;
border-width: 18px 18px 18px 0;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
left: -18px;
top: 10px;
}

  .rainbow {
      position:absolute;
      width:200%;
      height:2px;
      top:0;
      left:0;
      opacity:0.5;
    border-radius:5px 5px 0 0;
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
     -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;  
}

.rainbow.changecolor{
      -ms-transform: translate(-50%); /* IE 9 */
    -webkit-transform: translate(-50%); /* Safari */
    transform: translate(-50%);
}
  
  /* Search box */

  #search {
    margin:10px auto 10px auto;
    width: 150px;
    height: 25px;
    overflow: hidden;
    color: #404040;
    background: #fff;
    border:1px solid black;
  }
  
  #search .fa-search{
      font-size:12px!important;
      float:right;
      margin-right:5px;
      line-height:25px;
  }

  /* Navigation */

#description .fa-chevron-down{
    cursor:pointer;
    font-size:12px;
    display:flex;
    justify-content:center;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
#description .fa-chevron-down:hover{
    color:#58acfa;
}
.rotate180{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);  
}

#navigationin i {
    display: inline-block;
    color: #404040!important;
    font-size: 15px;
    margin:5px 6px 5px 6px;
    padding:3px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
  }
  #navigationin i:hover {
-webkit-transform : rotate(360deg);
-moz-transform : rotate(360deg);
-ms-transform : rotate(360deg);
-o-transform : rotate(360deg);
transform : rotate(360deg);
  }
   #navigationin .fa-question-circle:hover{
      color:red!important;
  }
  #navigationin .fa-link:hover{
      color:#fe9a2e!important;
  }
  #navigationin .fa-music:hover{
      color:#ffde07!important;
  }
  #navigationin .fa-user-circle-o:hover{
      color:#37ce00!important;
  }
  

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

<div class="about" onmouseover="entryOver(this)" onmouseout="notEntryOver(this)">

<div id="mainicons" hidden>
<a href="/" title="home"><i class="fa fa-home"></i></a>
<a href="/ask" title="contact"><i class="fa fa-comment"></i></a>
<a href="/submit" title="sumbit"><i class="fa fa-download"></i></a>
<a href="/about" title="about"><i class="fa fa-address-card"></i></a>
</div>
<!--End mainicons-->


<div id="avatar" onclick="iconsFunction(this)"><img src="http://static.tumblr.com/5c231601a0942f139489cca966931eef/4cxodkk/AOSorhvq1/tumblr_static_dpxyh4zatkgsocg4888kg8wg8.png"><i class="fa fa-arrow-down"></i></div>

<div id="description">
<span class="rainbow"></span>
<p>Welcome to <font color="#58acfa">actorsblog</font>!</p>
<p>Here you will find all sorts of fandom <b>pictures</b>, <b>icons</b> and <b>edits</b>!</p>
<p>If you have a question, a  request or a post to submit, <b>click the avatar</b>!</p>
  <i class="fa fa-chevron-down" id="chevron" onclick="showNavi()"></i>
      <div id="navigationin" hidden>
    <center>
    <a href="{text:Link One Url}" title="{text:Link One Title}"><i class="fa fa-question-circle"></i></a>
    <a href="{text:Link Two Url}" title="{text:Link Two Title}"><i class="fa fa-link"></i></a>
    <a href="{text:Link Three Url}" title="{text:Link Three Title}"><i class="fa fa-music"></i></a>
    <a href="{text:Link Four Url}" title="{text:Link Four Title}"><i class="fa fa-user-circle-o"></i></a>
    </center>
    </div>
    <!--End navigationin-->
    <div id="search">
    <form action="/search" method="get">
    <input type="text" name="q" value="SEARCH" style="position:absolute; width:120px;     line-height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px;      background:transparent; border:1px solid transparent; color:"#404040";"/>
    <i class="fa fa-search" type="submit"></i>
    </form>
    </div>
</div>

<div class="pagination">
<a href="{PreviousPage}">←</a>

<span class="current_page">1</span>

<a class="jump_page" href="{URL}">2</a>

<a href="{NextPage}">→</a>

</div>
<!--End pager-->

</div><!--End about--> 

＆＃13;

＆＃13;

＆＃13;

Answer 1

似乎我之前的回答并不清楚。我创建了一个JSFiddle。由于Stack Overflow不允许我在这里添加Fiddle链接。我将在评论部分添加它。 https：// jsfiddle.net/soz9zhby/2 /

我希望这能解决你的问题。如果有任何其他问题，请告诉我。

Answer 2

以下应该有效！

将#desription的位置从绝对位置更改为相对位置，并且还应将.pagination的margin-top从90％更改为10px。