定位問題
[英]Positioning Issue
問題描述
我遇到的這個問題不允許我絕對定位頁腳。 我把它放好了，它在IE中有5px的邊距，在Firefox中有很多邊距，在Chrome中也很完美。。。我真的不知道為什么會這樣...這是HTML：
<p>In posuere dapibus mauris, et elementum magna rhoncus quis. Morbi ultricies malesuada magna, vel porta risus rhoncus a. Morbi aliquam facilisis dolor, scelerisque porttitor dui auctor id.</p>
</div><!-- /info -->
</div><!-- /info-design -->
</div><!-- /content -->
<div id="info-footer"></div><!-- /info-footer -->
<div id="footer">
</div><!-- /footer -->
</div><!-- /wrapper -->
和CSS：
#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;}
#content{margin:0 auto;width:1000px;}
#info-design{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-opera-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
filter:alpha(opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: .8;
-moz-opacity: .8;
-khtml-opacity: .8;
background:#FFF;
border:1px double #000;
margin:0 0 10px 0;
position:absolute;
padding:10px 3px 3px 10px;
width:985px;
z-index:100;
}
#info{z-index:101;}
#info-footer{background:url(../img/BaseSite.gif) no-repeat center bottom;height:158px;position:absolute;bottom:0px;z-index:99;}
#footer{
background:url('../img/cesped.jpg') repeat-x center bottom;
height:176px;
position:absolute;
width:100%;
z-index:98;
bottom:0px;
}
我希望圖像“ cesped.jpg”僅出現在底部：0px中； 但是它不會停留在這里= /我是否錯過了某些東西或添加了我不應該擁有的東西？
編輯
我基本上想使頁腳位於“內容” div的最底部，但是不能將其放在該div中，因為它是固定寬度，並且我希望此圖像在整個瀏覽器中都重復-x（因此將其放置在在內容之后和寬度為“ 100％”的包裝器之前；我嘗試將包裝器的位置設為絕對和相對，但仍然不會將其自身放置在最底端……而我嘗試將其“自然地”壓下“但這不會...
它的外觀（在Chrome中是這樣）如下：
（來源： flickr.com ）
然后是IE和Firefox：
（來源： flickr.com ）
（來源： flickr.com ）
編輯2
我發現了這個問題，由於某種原因，我的#wrapper無法擴展到覆蓋整個瀏覽器的高度，只是其中的一小部分，有人知道我會缺少什么嗎？ 我補充說：
#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;min-height:100%;}
#content{margin:0 auto;width:1000px;}
3 個解決方案
解決方案1
2 2009-07-06 04:24:02
您要相對於...放置頁腳嗎？ 我猜是“在<div id="wrapper">的絕對底部嗎？ 然后，您需要將包裝器的position: relative;設為position: relative; 或position: absolute; 。 絕對定位的元素將自身定位在具有relative ， fixed或absolute位置的最接近的父元素上 。 從CSS看來，除了<html>或<body> ，什么都不是。
同樣，您的info-footer footer元素和footer元素都將位於彼此底部的最底層。 那是想要的效果嗎？
也許您可以發布您想要的外觀以及現在的外觀的模型？
是否真的需要這樣做，而不是僅使內容“自然”地將頁腳向下推？
編輯 ：不確定我是否理解正確，但是僅沿<body>底部repeating背景圖像該怎么辦？
body { background: url(image.jpg) repeat-x center bottom; }
解決方案2
0 2009-07-07 14:19:44
作為對編輯2的響應， position:absolute將Elements從文檔流中移出，因此不會在其父級上強制其高度（否則，父級將不會增長以容納它們）。 這就是為什么增加高度會起作用的原因； 但是，如果您絕對定位的Elements最終變得比您設置的高度高，則同樣的事情將會發生。
在上面，看起來div#info-design根本不需要絕對定位（據我所知）。 您可以刪除該聲明，為它指定一個等於div#footer高度的下margin-bottom ，並獲得相同的效果，而不必依賴於在div#wrapper上設置任意高度。
解決方案3
0 2009-07-07 14:28:04
在#wrapper中添加margin-bottom：50px是否有效？
CSS定位-相對定位問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.