如何將圖像固定在底部右側

我正在嘗試將頁腳/導航固定到屏幕的右下角，因此當您向下滾動時，它將始終可見，並且當您拉動瀏覽器的右下角使其更大，它將保持固定在角落裏。我也希望在縮小瀏覽器時縮小它。我已經想出了在左上角這樣做的方法，但不是正確的。如何將圖像固定在底部右側

我已經試過

position:fixed; 
bottom:0; 
right:0:

然而，這似乎並不奏效。我在頁面邊緣和我的圖像之間留下了一個神祕的空間（http://i.imgur.com/FZoaLd0.jpg）（在div上做一個負邊距並不會擦除此空間）我也不想將此作爲背景圖片添加，因爲我最終希望使其成爲圖像地圖。

對不起，如果這是令人困惑！我仍然是一個新手。

<div id="footer"> 
<img src= "images/swirlfooter.png" width="75%" height="75%"> 
</div>

是空間的寬度和高度的罪魁禍首？如果是的話我將如何解決這個問題？只需按照我需要的尺寸創建圖像？

來源

2013-03-18 rachel

請發佈一個完整的代碼示例。 – j08691 2013-03-18 17:15:26

請看看我的答案，嘗試通過頁腳設置寬度和高度，而不是img。 – Valky 2013-03-18 17:53:04

首先，您需要一個固定的位置，如果您不希望它在滾動時移動。

#footer { 
    position:fixed; 
    right:0; 
    bottom:0; 
    margin:0; 
    padding:0; 
    width:75%; 
} 
#footer img {width:100%;}

並清除邊距：

html, body { 
    margin:0; 
    padding:0; 
}

要小心，position:fixed，不幸的是不使用Safari在iOS工作（的iPhone，iPad ...）

你可以看到a demo here。

編輯

另一種解決方案是把IMG在頁腳的背景下，這樣的example：

#footer { 
    position:fixed; 
    right:0; 
    bottom:0; 
    margin:0; 
    width:75%; 
    height:75%; 
    background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right; 
    background-size:100%; 
}

來源

2013-03-18 17:24:28 Valky

您需要position: fixed;。

您也可能想嘗試清除身體和HTML頁邊距：

html { 
    margin: 0; 
    padding: 0; 
} 
body { 
    margin: 0; 
    padding: 0; 
}

難道withing有位置設置爲position: relative;任何父容器？

來源

2013-03-18 17:16:18 Plummer

也嘗試過。不會讓空間消失。 – rachel 2013-03-18 17:17:10

您是否清除了html/body邊距？ – Plummer 2013-03-18 17:17:29

不要父母！ – rachel 2013-03-18 17:23:53

絕對位置將隨滾動移動。你需要的是positon:fixed;

#footer { 
    position:fixed; 
    bottom:0; 
    right:0: 
}

來源

2013-03-18 17:16:33 Ibu

固定不是爲我工作 – rachel 2013-03-18 17:21:46

您是否嘗試將該屬性放在頁腳上？ – Ibu 2013-03-18 17:28:31

使用

position:fixed;

而不是absolute。

固定將始終保持在窗口的右下角。
滾動時發生絕對更改。

來源

2013-03-18 17:17:10

HTML：

<div class="class-name"> 
    <img src="images/image-name.png"> 
</div>

CSS：

div.class-name { 
    position: fixed; 
    margin-top: -50px; 
    top: 100%; 
    left: 100%; 
    margin-left: -120px; 
    z-index: 11000; 
} 
div.class-name img{ 
    width: 100px; 
}

根據您的圖片高度更改margin-top。

來源

2016-12-06 02:45:31

如何將圖像固定在底部右側

回答

相關問題