當div上面變得更大時，讓div移動

我有一個文本並在一個按鈕之下切換一些圖標。在文本下面有一個div分頁，我已經設置了一個頂部邊距，將它放在文本的正確位置。我這樣做是因爲我不知道爲什麼即使它是在文本後面的html中，沒有任何值在主容器的左上角，就像它是絕對的，容器是相對的？當div上面變得更大時，讓div移動

問題是當我切換圖標時，說明div溢出了分頁div。當我這樣做的時候，我不知道如何讓它降低。

任何想法？謝謝:)

// Show hide on click 
 

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

 
// 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"}); 
 
    });

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; 
 
    }

<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-->

來源

2017-06-21 Maëlle Jumel

爲什麼你不試圖在jquery中獲取.pagination的當前保證金最高值並添加31px並設置它？ –

是的，我想過@PradeepSambandam，但jquery自動執行它時沒有辦法嗎？例如，描述的高度本身增加 –

是實際上描述的高度增加，但描述的絕對位置不會移動分頁div。 –

以下應該工作！

將#desription的位置從絕對位置更改爲相對位置，並且還應該將.pagination的頁邊距從90％更改爲10像這樣。

來源

2017-06-22 12:20:17

再次感謝，雖然我們在這裏，你認爲我可以問你關於同一個項目的另一個問題嗎？ –

沒問題，你還有什麼問題？ –

你知道爲什麼jquery切換功能在#mainicons div上無法正常工作嗎？ –

好像我以前的答案是不明確的。我創建了一個JSFiddle。由於Stack Overflow不允許我在這裏添加Fiddle鏈接。我會將它添加到評論部分。 https：// jsfiddle.net/soz9zhby/2/

我希望這可以解決您的問題。請讓我知道是否有其他問題。

來源

2017-06-21 17:00:58

謝謝你的答案，不幸的是這不起作用：/ –

如果你正在使用固定，那麼它可能無法正常工作。因爲固定位置會使內容保持在固定位置。因此它可能會重疊。 –

你有一個選擇是創建一個固定的div。接下來是一個相對位置的子div。進一步添加兩個子div。使第一個子溢出：自動。第二個孩子應該有絕對的位置：底部：0。必要時給予相對格的最小高度。 –

當div上面變得更大時，讓div移動

回答

相關問題