如何将图像固定在底部右侧

我正在尝试将页脚/导航固定到屏幕的右下角，因此当您向下滚动时，它将始终可见，并且当您拉动浏览器的右下角使其更大，它将保持固定在角落里。我也希望在缩小浏览器时缩小它。我已经想出了在左上角这样做的方法，但不是正确的。如何将图像固定在底部右侧

我已经试过

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

如何将图像固定在底部右侧

回答

相关问题