html - 当我将这些图像位置设置为固定时，它们会堆叠在一起

Question

下面的 css 是我应用于 Facebook、twitter 和 Google 以及链接的，我已经添加到我正在制作的网站，我想制作它以便当我在网站上向下滚动时Facebook、twitter 和 Google plus 图标位于屏幕右上角。我向其中添加了 position: fixed; ，当我滚动时它们会停留在那个 Angular 落；然而，它们堆叠在一起，这对我来说应该很容易，但我的大脑一片空白:

.facebook {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/fb.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;

.facebook:hover {
    background-image: url('Styling-Images/bgcolor.png');

.twitter {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/tw.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;

.twitter:hover {
    background-image: url('Styling-Images/bgcolor.png');

.gp {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/gp.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;

.gp:hover {
   background-image: url('Styling-Images/bgcolor.png');

Answer 1

首先创建一个固定位置的 div 元素，然后将所有图像放入其中。

不要对图片使用固定位置，因为它会与每张图片重叠