兄弟 div 不接受最高命令

Question

我的 div text-button 未与我在其兄弟 div 下想要的正确边距对齐。我设置了position: absolute;，因为每次我将其设为相对时，jQuery 动画都不起作用。我希望text-button 出现在页面下方约 80% 的位置，然后设置为 70% 的动画，或者从兄弟 div text 获得 20% 的 margin-top，然后让它向上设置 10% 的动画。

我做错了什么？

$(function textdelays(){
  $('#text-title').delay(600).fadeIn(1200);
  $('#text').delay(600).fadeIn(1200);
  $('#text-button').delay(900).fadeIn(1200);
  $('#text-button').animate({'top': '70%'}, 1000);
});

.gray {
  background-color: #CCC;
  width: 100%;
  height: 600px;
 }
 .content-wrap {
   margin: 10% 25%;
   position: absolute;
 }
 #text-title {
  color: blue;
  display: none;
  position: relative;
 /* margin: 0 25%;*/
  font-size: 1.3em;
 }
 #text {
  color: green;
  display: none;
  position: relative;
  margin-top: 5%;
  font-size: 1.1em;
 }
  #text-button {
   position: relative;
   wdith: 100%;
   top: 80%;
   display: none;
   cursor: pointer;
 }
 .border-span {
   border: 2px solid #000;
   padding: 15px 10px;
   color: #FFF;
   font-weight: bold;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gray">
  <div class="content-wrap">
    <div id="text-title">fdsfdasfdaffasG<br>
    DIGITAL AGENCY</div>
    <div id="text">
    fdfdsf sdf asddd dddddd ddddd dddddd fdfsdaf dffdaf fdf fsda fdfas fdf dasaf f fdaa fdfdaf a  dfdffd  fdfffdffd fdfd dfdaad fda sd  adgdg dggagdg gdfgfg agf gfgfag fgfg gfag fggf fgfgag f gfg ag afgfgfgfga fg.
    </div>
    <div id="text-button"><span class="border-span">More About Us</span></div>
  </div>
</div>

Answer 1

不太确定我得到了你需要的东西：https://jsfiddle.net/ttfkg8ax/1/

我在您的按钮div 上设置了position:absolute;，并在jQuery 和CSS 上修复了top:; 值。我希望我能得到你想要的结果。

jQuery:

$(function textdelays(){
  $('#text-title').delay(600).fadeIn(1200);
  $('#text').delay(600).fadeIn(1200);
  $('#text-button').delay(900).fadeIn(1200);
  $('#text-button').animate({'top': '120%'}, 1000);
});

CSS：

#text-button {
   position: absolute;
   width: 100%;
   top: 140%;
   display: none;
   cursor: pointer;
 }

您必须设置top:140%;，原因如下：

您的text-button div 是您的content-wrap div 的子元素，它与此JSFiddle 中lightblue 彩色div 的大小完全相同：https://jsfiddle.net/ttfkg8ax/2/。设置top:140%; 会使你的按钮比你的父 div 低 40% 的大小。

要使您的按钮在您的content-wrap div 中，以便您能够使用top:80%;，那么您需要为content-wrap 元素指定一个高度，如下所示：@ 987654323@