这是在我的网站上放置滚动社交栏的好方法吗？

Question

我正在编写自己的滚动社交栏，但我确定我正在使用的方法。正如您在上面的图片中看到的那样，我在较窄的内容div中放置了一个更宽的灰色div。然后我将灰色的一个设置为css，使其z-index小于内容z-index。一旦我滚动网站，它工作正常并关注内容，但我的问题是 - 这是一个放置这样的栏的好方法吗？也许有一个更简单的解决方案，更好的浏览器兼容性，不是吗？

此致 马特

Answer 1

你可以将DIV的大小缩小到更小的空间，然后使其成为postion:fixed，以便随着滚动移动。

Fiddle

HTML

<div id='div1' align='center'>
    <span id='grey'>Like</span><br>Tweet<br><span id='grey'>Share</span>
</div>
<div id='div2' align='center'>Content</div>

CSS

#div1 {
    position:fixed;
    top:30px;
    left:5px;
    background:yellow;
    height:60px;
    width:50px;
    border:4px ridge black;
}
#div2 {
    height:800px;
    width:200px;
    background:orange;
    margin-left:60px;
}
#grey {
    background:grey;
}

Answer 2

为什么不放置＆＃34;像推文分享＆＃34; div（我猜）相对于内容。

div#content{position:relative;}和div#share{position:absolute;top:...;left:.. }