共享按钮导致移动设备上出现样式错误

Question

我有以下代码：

<div class="social-share"> 
<span class="st_facebook_large"></span> 
<span class="st_twitter_large"></span> 
<span class="st_email_large"></span> 
<span class="st_sharethis_large"></span> 
<span class="st_plusone_button_large"></span> 
</div>

使用这个CSS：

.social-share {
position:absolute;
z-index:0 !important;
}
.image {
position:absolute;
z-index:2;  
}

上面的CSS是自定义的，因此共享按钮旁边的图像不会干扰它们。

这会在移动设备上造成此样式错误：

我正在考虑做这样的事情，但它不起作用：

@media screen and (max-width: 768px) {
  .social-share {
     margin-bottom: 17px;
  }
}

URL to the scenario

问题：如何解决移动设备上的样式错误？

Answer 1

你的问题是使用“position：absolute;”这导致保证金不起作用。您需要将其更改为“position：relative;”你会发现保证金正常运作。无需针对此特定问题进行媒体查询。

Answer 2

给出位置：相对于包含class =＆＃34; social-share＆＃34;

的div