2013-05-01 135 views
1

出於某種原因,我的頁面底部有很多額外的空白區域,我似乎無法擺脫。我不能在空間內放置任何東西,也不能擺脫它。我做了一些研究,我有一個預感,它與我的圖像是position:relative這一事實有關,但我仍然不完全確定。如果我需要擺脫position:relative,有人請告訴我如何放置不使用position:absoluteposition:relative的圖像嗎?頁面底部的額外空間

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" type="text/css" href="SDL.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Home</title> 
</head> 

<body> 
<center> 
<img src="img/SDL 4 Final Recompress.jpg" height="283" style="position: relative;"/> 
<br/> 
<hr width="500"/> 


<img src="img/Studio-Light_sxu1.png"   style="position: relative; top: -496px; left: 30px; z-index: 3; height: 200px;"/> 
<img src="img/Studio-Light_sxu1 flipped.png" style="position: relative; top: -496px; left: 650px; z-index: 3; height: 200px;"/> 

<embed 
src="http://blip.tv/play/AwGUv2w" 
type="application/x-shockwave-flash" width="669" 
height="500" allowscriptaccess="always" 
allowfullscreen="true" wmode="transparent" style="position:relative; z-index: 2; top:100px; left:-200px"> 
</embed> 

<img src="img/Stage-Background.png" style="position: relative; z-index: 1; height: 680px; top:-500px"/> 
</center> 

<div id="nav"> 
<p>All Episodes</p> 
<a>Contact</a> 
<a>Facebook</a> 
<a>Meet the Crew</a> 
</div> 





</body> 
</html> 
+0

它適用於我,沒有額外的空白。你可以把你的代碼放在http://jsfiddle.net/? – AliBZ 2013-05-02 00:01:02

回答

1

更改此

<img src="img/Stage-Background.png" style="position: relative; z-index: 1; height: 680px; top:-500px"/> 

<img src="img/Stage-Background.png" style="z-index: 1; height: 680px; margin-top:-500px"/> 

當你這樣做的位置是:相對的,移動它,它會保留文檔的其餘部分一樣,如果你沒有動它,所以它具有保持空間在它下面。如果你做一個負邊界頂部,它會拉動圖像向下移動的所有東西。

+0

這解決了它。你介意告訴我爲什麼這有效嗎? – qaxf6auux 2013-05-02 00:21:24

+0

添加解釋到答案 – dave 2013-05-02 00:26:43

+0

真棒。另外,如果你擺脫了「position:relative」,爲什麼z-index仍然適用? – qaxf6auux 2013-05-02 00:32:49

0

它看起來像

<img src="img/Stage-Background.png" style="position: relative; z-index: 1; height: 680px; top:-500px"/>

導致您的問題,嘗試改變

height: 680px;

看問題是否存在

+0

改變高度擺脫了空間,但它也縮小了圖像。還有另一種方法可以改變它嗎? – qaxf6auux 2013-05-02 00:16:10

相關問題