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

Question

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

真诚的， 马特

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: .. 
}