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

Question

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

真诚的，马特

Answer 1

您可以将DIV剪切的大小缩小到更少的空间，而不是让它postion:fixed随着滚动而移动。

小提琴

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

为什么不将“喜欢的推文分享”div（我猜）相对于内容定位。

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