Question

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

.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元素，然后将所有图像放入其中。

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

Answer 2

试试this。为所有项目提供

 margin-right:5px;

会导致问题。

        .facebook {
           width: 40px;
           height: 40px;
           display: inline-block;
           background: transparent url('http://ottopilotmedia.com/wp- content/uploads/2012/07/facebook-icon.jpg') center top no-repeat;
           background-size: contain;
           float:left;
        }

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

2 个答案: