我需要让这个按钮下降35px到下面的div（重叠）

Question

我想让下载按钮（#bluebutton）下降大约35 px到下面的div中，以使两个div（可点击）重叠在中间（更接近社交按钮）的效果。怎么能我做到了吗？我想要一种最干净的方式。非常感谢你的帮助。如果需要，我可以提供更多的照片。一个小提琴非常非常感激=）

Answer 1

将此css放入您的蓝色按钮div

 #bluebutton {
   width: 60%;
   color: white;
   text-align: center;
   background-color: #05afcd;
   border: 1.5px solid #505050;
   margin: auto;
   height: 70px;
   font-size: 36px;
   margin-bottom: -35px;
   z-index: 9999;
   position: relative;  /*** add position relative *******/
   zoom: 1;    /*** add zoom:1 for ie old browsers  *******/
 }

这里是您的代码的演示小提琴： http://jsfiddle.net/jkkheni/FM99D/

Answer 2

只需添加此

即可

#bluebutton {
    margin-bottom: -35px;
}

如果您在灰色背景区域中点击它有任何问题..

只需添加

#bluebutton {
    z-index: 9999;
}

Answer 3

我已经使用代码中的相关部分创建了CodePen。

在它上面我对样式做了以下修改（用注释标记）：

#bluebutton
{
 width: 60%;
 color: white;
 text-align: center;
 background-color: #05afcd;
 border: 1.5px solid #505050;
 margin: auto;
 height: 70px;
 font-size: 36px;
 position: relative; /*<---*/
 top: 35px; /*<---*/
}

您可以在此new CodePen修改后看到它。

Answer 4

这是我为你制作的小提琴。

http://jsfiddle.net/B9UvD/1/

基本上，你需要的是从自然流动中取出盒子。你可以将它应用到#bluebutton：

position: relative; 
top: 20px; 

（顺便说一句，尝试将按钮命名为更通用和可描述的内容。你不知道你是否希望蓝色按钮是红色的或将来的东西。＃download-button可能是一个更好的名字）