相對於包裝div的位置固定元素HTML CSS

我正在尋找位置在下一頁上的窗口右側浮動的框。相對於包裝div的位置固定元素HTML CSS

我想這相對於白格在它的所有文本的位置，所以，而不是它被貼在車窗邊，它漂浮也許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; 
}

感謝您的幫助！

來源

2012-05-23 Mike George

請將您的樣式替換爲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; 
}

來源

2012-05-23 05:26:02 Vishal

我希望我可以選擇組合答案，但是這個做到了。謝謝！ –

您需要將social-float放入wrapper div並更新其樣式right:-160px。 160px是寬度social-float和10px更多是額外的餘量。而且不要忘記添加position:relative到#wrapper

請在下面

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;

來源

2012-05-23 05:12:24 Dips

嗯...有什麼elese，我要加入到＃社會流通股，我的頁面更新到您的建議，但現在的框關閉屏幕。謝謝你的幫助！ –

在'social-float'上添加'position：absolute'而不是'fixed'在'social-float'上 – Dips

更好，但是現在當你向下滾動頁面時它不會跟着你 –

移動內部#Wraper您的div取代social-float CSS，CSS以下

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

使用，

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

來源

2012-05-23 05:20:47

相對於包裝div的位置固定元素HTML CSS

回答

相關問題