Question

我希望在下一页的窗口右侧放置漂浮的方框。

我想将此相对于白色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置于wrapper div内并更新其样式right:-160px。 160px的宽度为social-float，10px的宽度为额外边距。不要忘记将position: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;

Answer 2

将你的div移到#Wraper，

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

Answer 3

请使用以下内容替换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;
}

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

3 个答案: