Question

我已经在这里搜索了许多类似FB的按钮线程，但无法看到这个问题。

我按照FB开发人员的说明在我的页面添加了一个类似FB的按钮。

JS小提琴：http://jsfiddle.net/kitsonbroadhurst/9hamfavb/2/

我一直在使用像这样的bootstrap布局我的页面：

HTML

<body>
<div id="fb-root"></div>
    <script>
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

<div class="container-fluid">
    <div class="row">
    <!-- Social Media Bar -->
        <div class="col-xs-1 col-xs-offset-1">
            <div class="a social-media">
                <div class="a fb-like" data-href="https://enhanceddd.com/article.html" data-width="55" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
            </div>
        </div>
        <!-- Main Article -->
                <div class="col-xs-6">
                    <h1>Article Title Goes Here</h1>
                    <img class="a img-main" src="" alt="Article image"/>
                    <h2>First Title - Right here!</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dolor eget tortor auctor ornaquam imperdiet arcu tellus, eu pretium lacus dignissim eget. Curabitur viverra mollis viverra. Etiam eget quam diam. Integer facilisis odio sit amet commodo placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- Sidebar Right - Article Links -->
                <div class="relevant-articles col-xs-2 col-xs-offset-1">
                    <img class="img-relevant" src="images/other-articles400.png" alt="Holding Image"/>
                    <img class="img-relevant" src="images/other-articles400.png" alt="Holding Image"/>
                    <img class="img-relevant" src="images/other-articles400.png" alt="Holding Image"/>
                </div>
            </div>
    </div>
</body>

CSS

.social-media {
  top: 150px;
  height: 300px;
  width: 65px;
  padding-left: 5px;
  position: fixed;
}

.img-main {
  height: 400px;
  width: 400px;
}

.relevant-articles {
  margin-top: 50px;
  height: 800px;
}

.img-relevant {
  position: relative;
  height: 200px;
  width: 200px;
  margin-top: 25px;
  margin-bottom: 25px;
}

当用户点击时，评论＆＃34; flyout＆＃34;选项出现但没有响应。它显示在右侧主要内容div的后面。

有人可以帮我确认评论＆＃34; flyout＆＃34;总是排在最前面？

我尝试将更高的z-index应用于社交媒体列，但它没有效果。

注意：你必须喜欢然后确认才能看到问题，等等不会出现在你的FB时间线上！

Answer 1

我已经回顾了z-index的使用，并设法使其发挥作用。

我将z-index为2应用于社交媒体＆＃34;包装＆＃34; div保持了类似的＆＃34; flyout＆＃34;在顶部！

.social-media {
  top: 150px;
  height: 300px;
  width: 65px;
  padding-left: 5px;
  position: fixed;
  z-index: 2;
}

JSFiddle：http://jsfiddle.net/kitsonbroadhurst/9hamfavb/3/

抱歉我缺乏css知识！

Facebook喜欢按钮 - 评论框“flyout”没有反应

1 个答案: