CSS將元素保持在屏幕上的「固定」位置

Question

我正在尋找一種技巧在瀏覽器屏幕上使用CSS創建「固定」HTML對象。我希望它始終保持在同一位置，即使用戶滾動瀏覽文檔時也是如此。我不確定這是什麼合適的名詞。

這就像在Facebook或聊天按鈕反饋按鈕是一些跟隨你整個頁面的網站。

在我的情況下，我想始終在屏幕的右下角保留一個div。示例CSS讚賞。

Answer 1

你可能會尋找position: fixed.

作品無處不在，除了IE6和許多移動設備。

Answer 2

position: fixed;

會做到這一點。

它處理像position:absolute;不同之處在於，將與窗口用戶向下滾動內容滾動。

Answer 3

你可以這樣說：

#mydiv { 
    position: fixed; 
    height: 30px; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

這將創建一個div，將被固定在屏幕的頂部。 - fixed

Answer 4

最簡單的方法是使用position: fixed：

.element { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
} 

http://www.w3.org/TR/CSS21/visuren.html#choose-position

（注意固定的位置是越野車/ iOS和Android上的瀏覽器不工作）

Answer 5

的好辦法：

position:fixed; 

作品，但是它打破了某些選項....例如，用固定位置標記的可滾動菜單不會隨着瀏覽器窗口擴展...希望有另一種方法來頂住/頂部的東西

Answer 6

試試這個：

p.pos_fixed 
{ 
position:fixed; 
top:30px; 
right:5px; 
} 

Answer 7

確保你的內容保存在一個div中，說divfix。

<div id="divfix">Your Code goes here</div> 

的CSS：

#divfix { 
     bottom: 0; 
     right: 0; 
     position: fixed; 
     z-index: 3000; 
     } 

希望，這將幫助你..

Answer 8

HTML

<div id="fixedbtn"><button type="button" value="Delete"></button></div> 

CSS

#fixedbtn{ 
position: fixed; 
margin: 0px 10px 0px 10px; 
width: 10%; 
} 

Answer 9

爲了保持漂浮在同一位置的文本在圖像改變瀏覽器縮放的時候，我用這個CSS：

position: absolute; 
margin-top: -18% 

我瘦k代表固定像素的百分比是什麼。乾杯!

Answer 10

position: sticky; 

當您到達其滾動位置時，粘性元素粘在頁面頂部（頂部：0）。

見例如： https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky