Question

我正在为一个班级的项目工作并遇到问题。

该网站可在此处找到：http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10

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

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

我希望该图像始终显示在底部，而不必使用内联样式。基本上，我希望它能从页脚中伸出，但不会有任何其他因素受到影响或移动。

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

以下是CSS的链接：http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css

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

Answer 1

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

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

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

Answer 2

要使图像忽略它的父元素，可以使用定位和z-index的组合：

position: absolute;
z-index: 2;

您还可以尝试使用display和overflow属性，具体取决于您想要的样子。

Answer 3

当我查看您的代码时，我想出了这些css值，以便在您的网页上完全对齐.sidebar。您有position: relative;来定位它，然而，它将相对移动到窗口大小和周围元素的方式。这就是为什么它可能会四处走动。但是，position: absolute;不会考虑周围的元素，因此会保留。

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

Answer 4

关键是将图像置于绝对位置。我已将桅杆插图移动到页脚：http://jsfiddle.net/David_Knowles/98PLA/
这会解决您的问题吗？

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

有一个图像从页脚伸出

4 个答案: