0

我正在为一个班级做一个项目并且有一个问题。

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

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

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

我希望该图像始终出现在底部，而不必使用内联样式。本质上，我希望它伸出页脚，但不会影响或移动其他任何东西。

如果可能的话，执行此操作的过程是什么？

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

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

4

4 回答 4

1

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

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

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

于 2013-04-22T18:15:43.203 回答
0

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

position: absolute;
z-index: 2;

您还可以尝试使用display和overflow属性，具体取决于您希望它的外观。

于 2013-04-22T18:30:54.363 回答
0

当我查看您的代码时，我想出了这些 css 值来完全对齐您.sidebar的页面。您必须position: relative;定位它，但是，它会相对于窗口的大小和周围元素移动。这就是它可能四处移动的原因。但是，position: absolute;不考虑周围的元素，因此将保持不变。

.sidebar {
    position: absolute;
    top: 233px;
    right: 10px;
}
于 2013-04-22T18:38:20.230 回答
0

关键是放置绝对位置的图像。我已将桅杆插图移至页脚： 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 -->
于 2013-04-22T18:45:43.283 回答