Question

我正尝试使用以下方法在背景启动图像上放置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');

Answer 1

尝试使用z索引，如下所示：

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

Answer 2

我稍微重新安排了你的代码。我不知道你的飞溅图像是什么，所以我只使用了我自己的一个。这是我最新的fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

如何在图像顶部定位Twitter关注按钮

2 个答案: