如何将 Twitter 关注按钮放置在图像顶部答案

【问题标题】：How to position Twitter follow-button on top of image如何将 Twitter 关注按钮放置在图像顶部
【发布时间】：2015-10-26 06:00:52
【问题描述】：

我正在尝试使用以下方法将 Twitter 关注按钮放置在背景启动图像之上：

<style>
div.splash
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.twitter-follow-button
{
    position: absolute; [Edit: Copy and paste error. This used to read "position: relative"]
    top: 0px;
    left: 0px;
}
</style>

<div class="splash">
    <img src="image_1.png">
    <a href="https://..." style="position: absolute; top: 320px; left: 225px;">
        <img src="image_2.png">
    </a>
    <a href="mailto:..." style="position: absolute; top: 258px; left: 500px;">Email</a>
    <a href="https://..." style="position: absolute; top: 320px; left: 225px;">Link</a>
    <a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
            Follow @twitter_handle
    </a>
</div>

但我无法让 Twitter 锚与启动图像共享空间。将 style="..." 代码放在 Twitter 锚标记中也不起作用，即使它对其他两个锚有效，其中一个也显示图像。

编辑：

这是 Twitter 为这个按钮提供的脚本：

!function(d,s,id)
{
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id))
    {
        js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js,fjs);
    }
}
(document, 'script', 'twitter-wjs');

【问题讨论】：

你能创建一个 jsFiddle 来展示你的问题吗？
您的代码不够完整，我无法运行它并查看问题所在。如果您希望元素共享空间，通常您应该考虑使用 CSS 属性 position: absolute;。
我会尝试建立一个 jsFiddle。我以为我忘记了一些对其他人来说很明显的布局的基本知识。
@MaximillianLaumeister：对不起，我确实先尝试了“位置：绝对”，就像其他两个锚一样，然后在事后尝试了“位置：相对”，这就是粘贴的代码。似乎奇怪的是 Twitter 锚在使用相同的样式代码时会有不同的行为。
@Schemer 这对你有什么作用？

标签： javascript html css twitter

【解决方案1】：

我稍微重新安排了您的代码。我不知道你的启动画面是什么，所以我只使用了我自己的一张。这是我最新的fiddle

#splash {
  position: absolute;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url("http://www.musicmatters.ie/images/bara2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.twitter-follow-button {
  position: absolute;
  top: 0px;
  left: 0px;
  vertical-align: top;
}
a.links1 {
  position: relative;
  display: inline-block;
  float: left;
  top: 258px;
  width: auto;
  padding-right: 20px;
  color: white;
  text-decoration: none;
  font-weight: 900;
}
a.links {
  position: absolute;
  display: inline-block;
  top: 320px;
  float: left;
  color: white;
  text-decoration: none;
  font-weight: 900;
}

<div id="splash">

  <a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
    <img src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" width="30px" height="30px">Follow twitter_handle
    <a class="links" href="#">Home</a>
    <a class="links1" href="#">Mailto</a>
    <a class="links1" href="#">Other Link</a>
  </a>

</div>

【讨论】：

谢谢。飞溅只是一个矩形 .png，锚中的图像也礼貌地与其共享空间。我尝试了这个，它导致了相同的内联显示问题，但 Twitter 按钮现在与启动画面的顶部对齐。这似乎是一个线索。为什么要对齐飞溅的顶部而不是视口？您的代码是否包含他们提供的脚本？
@Schemer 没有，但我可以编辑它以包含 twittter javascript
我认为问题在于 insertBefore() 的行为。我无法发布 jsFiddle，因为所有链接都包含尚未公开的识别信息。 :-/ 这是链接：about.twitter.com/resources/buttons
@Schemer 这里是一个更新的小提琴。它不会坐在左边！ jsfiddle.net/rcp40q6L/3
非常感谢您的尝试！即使您进行了修改，我仍然无法让它共享空间。该按钮坚持表现得像它自己的
并且只是拒绝与飞溅重叠。

【解决方案2】：

尝试像这样使用 z 索引：

div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
z-index: -1;
}

【讨论】：

感谢建议，但没有区别。
如果你想把推特按钮放在背景上，那么我教背景应该是相对的，推特按钮是绝对的