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

Question

我希望在下面的页面上定位窗口右侧的浮动框。

http://mikegeorge.org/acej/index.html

我想相对于白色的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;
}

谢谢你的帮忙!

Answer 1

请将您的social-float 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;
}

Answer 2

您需要将social-float放入wrapper div中，并更新其样式right:-160px。160px是social-float的宽度，10px more是额外的边距。别忘了在#wrapper中添加position:relative

请将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;

Answer 3

在#Wraper中移动你的div，

<div id="wrapper">


  <p>Curabitur id neque eget justo ultrices semper. Suspendisse eget sapien eros, sed dapibus justo. Fusce ullamcorper, felis vitae consequat malesuada, tortor metus mattis ligula, nec pellentesque nisl sapien vel velit. Sed augue sem, malesuada ut elementum dictum, blandit vitae lorem. Aliquam eu nulla neque, vitae feugiat tortor. In id augue nisl. Donec congue arcu vel mi semper sit amet porttitor tortor condimentum. Donec non eros tempor dolor bibendum venenatis. Donec ornare imperdiet leo, non venenatis odio mollis et. Suspendisse in sapien eu sapien egestas elementum.    </p>
  <p>Sed cursus consequat euismod. Pellentesque sagittis, odio et luctus sagittis, tellus mauris malesuada leo, in tincidunt nisl urna ac urna. Morbi vestibulum faucibus elit vel volutpat. Aliquam erat volutpat. Donec posuere velit vitae risus mattis molestie. Curabitur posuere egestas justo, quis iaculis leo convallis ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tristique augue et leo consectetur in porttitor felis euismod. Aliquam ac mi condimentum arcu euismod molestie.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor adipiscing turpis, eu tristique tellus congue sit amet. In non ipsum risus. In hac habitasse platea dictumst. Sed eu mauris nulla. Ut vitae arcu urna, eu sodales enim. Curabitur porta elementum diam at adipiscing. Sed consectetur convallis neque, eu fermentum lectus mattis in. Ut tristique feugiat elementum. Quisque rutrum dui quis massa commodo id tempor dui vulputate. </p>
  <p>In nisi felis, venenatis at pellentesque et, bibendum eget justo. Sed imperdiet commodo rutrum. Proin massa felis, porttitor et commodo at, semper eu sapien. Curabitur eu neque libero. Proin consequat sagittis felis, ut ultricies orci auctor eget. Sed a vehicula risus. Vivamus nulla nisi, lobortis a semper nec, lobortis vel felis. Cras et sem magna, vel ullamcorper justo. Quisque volutpat massa eget leo blandit ultricies eget non nisl. Nunc vel lacus quis risus placerat consectetur vitae quis lectus. Nullam a ante ut nibh facilisis viverra. Nullam mollis, risus sit amet eleifend mattis, massa lorem tempor mauris, sed dictum nisl enim accumsan velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in faucibus enim. Nulla at mi orci, vel commodo felis. Donec ac tristique ante. </p>
  <p>Nunc eu tellus lectus. Vivamus tellus orci, scelerisque a gravida id, suscipit ut purus. Duis eu elit magna. Mauris quis tellus tellus. Fusce sed lorem in lectus aliquam cursus. Etiam orci lectus, fringilla sed imperdiet id, pharetra ut nisi. In hac habitasse platea dictumst. Vestibulum sed metus vel justo pulvinar vehicula ut lobortis mi. Cras viverra porta enim et malesuada. Quisque ullamcorper justo turpis, eu consequat ligula. Nam eget massa enim, in dictum felis. Nam cursus augue eu augue dignissim venenatis. Vestibulum in dignissim odio. Vivamus pulvinar, diam in tempor varius, tortor dolor tempus arcu, vel fringilla lectus eros at mi. </p>
**<div id="social-float" style="display: block; ">
    <div class="sf-twitter">
        Yo! Sign up fo' this!
    </div>

    <div class="sf-facebook">
        You know you want to!
    </div>

    <div class="sf-plusone">
        <a href="http://lulzdaily.com/no-im-not-drunk" target="_blank">Click Me, Por Favor!</a>

    </div>
</div>**
</div>

使用下面的css，

#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;
}