相对于包装器div HTML CSS定位固定元素

我正在寻找下一页窗口右侧浮动的框的位置

我想将它相对于包含所有文本的白色div进行定位，这样它就不会附加到窗口的侧面，而是浮动到距离内容区域10-20px的位置

CSS源

#float-box {
position: fixed;
right: 10px;
top: 100px;

width: 150px;
padding: 10px 5px;
text-align: center;

background-color: #fff;

border: 5px solid rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

display: none;
}

.fb-1 {
height: 62px;
margin-bottom: 10px;
}

.fb-2 {
height: 60px;
margin-bottom: 10px;
}

.fb-3 {
height: 60px;
}

---

谢谢你的帮助

您需要将

社交float

放入

包装器div

中，并更新其样式

右侧：-160px

160px

是

social float

的宽度，

10px

更多是额外的边距。不要忘记将

位置：relative

添加到

#wrapper

请将

social float

css替换为以下内容

position: fixed;
left: 50%;
top: 100px;
width: 150px;
padding: 10px 5px;
text-align: center;
background-color: 
white;
border: 5px solid 
rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
margin-left: 380px;

把你的潜水艇移到包裹器里面

---

请将

社交浮动

id的样式替换为：

#social-float {
    background-color: #FFFFFF;
    border: 5px solid rgba(180, 180, 180, 0.7);
    border-radius: 8px 8px 8px 8px;
    display: none;
    float: right;
    margin-left: 715px;
    padding: 10px 5px;
    position: fixed;
    text-align: center;
    top: 100px;
    width: 150px;
}

---

六羟甲基三聚氰胺六甲醚。。。有什么我必须添加到#social float中的elese吗？我根据您的建议更新了页面，但现在该框已脱离屏幕。谢谢你的帮助！添加

position:absolute

而不是

fixed

在

social float

上，这样更好，但是现在当你向下滚动页面时，它不会跟随你。我希望我可以选择一个组合答案，但这一个做到了。谢谢

#social-float {
left: 1020px;
top: 100px;
width: 150px;
padding: 10px 5px;
text-align: center;
background-color: 
white;
border: 5px solid 
rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
}

#social-float {
    background-color: #FFFFFF;
    border: 5px solid rgba(180, 180, 180, 0.7);
    border-radius: 8px 8px 8px 8px;
    display: none;
    float: right;
    margin-left: 715px;
    padding: 10px 5px;
    position: fixed;
    text-align: center;
    top: 100px;
    width: 150px;
}