Question

我正在尝试将我的社交图标放置在浏览器的右侧，这样当浏览器调整大小时，它们始终保持在浏览器的右侧，这是一个JSfiddle，显示他们当前所做的事情http://jsfiddle.net/SHHM8/ ，

HTML

<div id="fixedsocial">
    <div class="facebookflat"></div>
    <div class="twitterflat"></div> 
</div>

CSS

#fixedsocial {
    top:30%;
    height:200px;
    width:60px;
    position:fixed;
}

.facebookflat {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
   transition:ease 500ms;
    background-size:50px;
    opacity:1;
}

.facebookflat:hover {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    background-size:60px;
    opacity:0.5;
    transition:ease 500ms;
    margin-left:-20px;
    width:70px;

}

.twitterflat {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    transition:ease 500ms;
    background-size:50px;
    opacity:1;
}

.twitterflat:hover {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    background-size:60px;
    opacity:0.5;
    transition:ease 500ms;
    margin-left:-20px;
    width:70px;
}

我尝试使用

将名为“fixedsocial”的容器浮动到屏幕右侧

float:right;

然而，这没有做任何事情。

所以请你把图标固定在浏览器的中间右侧，非常感谢你的帮助

Answer 1

只需将right: 0添加到#fixedsocial div，然后就完成了

#fixedsocial {
    top:30%;
    height:200px;
    width:60px;
    position:fixed;
    right: 0;
}

<强> Updated Fiddle

Answer 2

您需要的是：

#fixedsocial {
  position: fixed;
  right: 0;
  top: 50%;
}

Answer 3

这是正常的，

margin:30%;
height:200px;
width:60px;

您的#fixedsocial将始终在浏览器顶部显示30％的窗口。如果您设定固定保证金，您的问题将得到解决

试

margin-top:150px;
height:200px;
width:60px;

Answer 4

你需要一些东西：

＆＃13;

.sidebar-wrap{
    position: fixed;    
    width: 60px;
    height:250px;
    top: 50%;
    margin-top: -125px; /* Needs to be half of the height */
}

＆＃13;

有关详细信息，请参阅此文章：Responsive Sticky Social Sidebar

社交图标固定在浏览器的中央右侧

HTML

CSS

4 个答案: