Css 在页脚外贴一张图片

我正在为一个班级做一个项目，有一个问题

可在以下位置找到该网站：

我现在拥有的是一个div，我在HTML和div中使用内联样式将其定位在底部

它现在看起来很好，但这当然取决于正在使用的浏览器

我希望该图像始终显示在底部，而不必使用内嵌样式。基本上，我希望它伸出页脚，但不要影响或移动任何其他内容

如果可能的话，这样做的过程是什么

以下是CSS的链接：

---

非常感谢您提前提供的帮助。

我假设油井塔图像就是要定位的图像。我将创建一个带有透明背景的.png文件，然后将其设置为.container元素的背景图像

png透明度将允许其他背景图案在矢量图像的开放空间（透明）部分中显示

---

只要页脚元素正好在容器元素之后流动，这就可以正常工作。

要使图像忽略其父元素，可以使用定位和z索引的组合：

position: absolute;
z-index: 2;

---

您还可以根据您想要的外观，尝试使用

显示

和

溢出

属性。

当我查看您的代码时，我想出了这些css值来完全对齐页面上的

.sidebar

。你有

位置：相对位置：绝对不考虑周围元素，因此将保持不变。

.sidebar {
    position: absolute;
    top: 233px;
    right: 10px;
}

关键是将图像放置在绝对位置。我已将桅杆插图移到页脚：

这能解决你的问题吗

#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */
.fltright {position: absolute; bottom: 56px; right: 0;}

/* For modern browsers */
.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
/* For IE 6-7 (trigger hasLayout) */
.container {
    zoom:1;
}

    <div id="footer">
        <!-- Begin Container -->
            <div class="container">
                <img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/>
                <h1>Copyright &copy; 2013 <br />All Rights Reserved</h1>
                <h3><a href="mailto:seb10@my.fsu.edu">Webmaster</a> |<a href="#">Site Map</a> | <a href="about.html">About</a></h3>
            </div>  
            <!-- End Container -->
    </div>  
    <!-- End Footer -->

#footer.container{overflow:visible；}/*使用不同的技术包装浮动元素，以便将图像放置在页脚中并使其突出-请参见下面*/
.fltright{位置：绝对；底部：56px；右侧：0；}
/*适用于现代浏览器*/
.货柜：在，
.货柜：之后{
内容：“；
显示：表格；
}
.货柜：之后{
明确：两者皆有；
}
/*对于IE 6-7（触发器布局）*/
.集装箱{
缩放：1；
}
版权及副本；2013
版权所有
| | 
这非常有效。然而，我确实遇到了一个问题，我在About页面上的个人图像现在被推到了页面标题下。另外，我也不太担心谷歌Chrome浏览器不能在iPad上运行，但页脚会变大，图像会看不见，因为它们的颜色相同。知道它为什么不起作用吗？除此之外，这是有帮助的。谢谢。没关系，我修改了我的关于页面。。。我忘了您编辑了.fltright，这影响了该图像。只需要将其设置为.fltright2并更改HTML。这就解决了问题。仍然对iPad谷歌浏览器的问题感到好奇。。。因为它在iPhone谷歌Chrome应用程序上运行良好。。。奇怪的也许应用程序有问题。