讓你的頁面在ie6也能玩position:fixed

作者:hanher 日期:2007-12-12

字體大小: 小中大

測試通過ie6、ie7、ff2、Opera9、Safari3

原理

在瀏覽器中固定位置(懸停)，是不是很酷啊，可惜我們的ie6卻不支持，怎麼辦？寫hack?寫js(如果我只是一個css代碼工人呢)？是不是太麻煩了呢？如果你這樣想想…(為什麼會懸停呢？在瀏覽器外面不就可以了嗎?)，那我們是不是把html,body元素隱藏掉了，再用div(比如<div id=body>)元素偽裝成body元素，再把要懸停的元素(比如div)寫在id=body元素的外層，是不是留可以了呢？^_^』

實例

我們可以先新建一個頁面，命名為fixed.html，下面寫開始寫CSS

程序代碼

/*隱藏htmml,body*/
html,body{height:100%; width:100%; overflow:hidden; margin:0}
/*用div偽裝body*/
div#body{
  position:relative;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:scroll;
  background:#fff;
  cursor:default
}
/*懸停的元素 id=fixed*/
div#fixed{
  position:absolute;
  z-index:10;
  left:100px;
  top:100px;
  width:400px;
  height:300px;
  background:#000;
  color:#fff;
  text-align:center;
  line-height:300px
}

html

程序代碼

<div id="fixed">
    討厭,我怎麼不會動了啊?
</div>
<!-div id=body 為body--->
<div id="body">
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
</div>

上面不購標準哦？
標準的，實用的(實在找不到形容詞了!)…
我們給寫個小小的hack，使它兼容各個瀏覽器吧?好！請看下面！

程序代碼

/*隱藏htmml,body===//我們在這裡只給ie6隱藏body,其他瀏覽器使用position:fixed*/
/*html,body{height:100%; width:100%; overflow:hidden; margin:0}*/
/*簡簡單單...*/
html,body{height:100%; width:100%; overflow:visible!important; overflow:hidden}
/*用div偽裝body*/
div#body{
  position:relative;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:scroll;
  background:#fff;
  cursor:default
}
/*懸停的元素 id=fixed*/
div#fixed{
  position:fixed!important;
  position:absolute;
  z-index:10;
  right:100px;
  bottom:100px;
  width:400px;
  height:300px;
  background:#000;
  color:#fff;
  text-align:center;
  line-height:300px
}

HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>讓你的頁面在ie6也能玩position:fixed</title>
<style>
<!--
/*隱藏htmml,body*/
html,body{height:100%; width:100%; overflow:visible!important; overflow:hidden; margin:0}

/*用div偽裝body*/
div#body{
  position:relative;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:scroll;
  background:#fff;
  cursor:default
}

/*懸停的元素 id=fixed*/
div#fixed{
  position:fixed!important;
  position:absolute; 
  z-index:10;
  right:100px; 
  bottom:100px; 
  width:400px; 
  height:300px; 
  background:#000;
  color:#fff; 
  text-align:center;
  line-height:300px
}
-->
</style>
</head>

<body>
<div id="fixed">討厭,我怎麼不會動了啊?</div>
<div id="body">
<h3>原理</h3>
<p>在瀏覽器中固定位置(懸停),是不是很酷啊,可惜我們的ie6卻不支持,怎麼辦?寫hack?寫js(如果我只是一個css代碼工人呢)? 是不是太麻煩了呢?如果你這樣想想...(為什麼會懸停呢?在瀏覽器外面不就可以了嗎?).那我們是不是把html,body元素隱藏掉了,再用div(比如<div id=body>)元素偽裝成body元素,再把要懸停的元素(比如div)寫在id=body元素的外層,是不是留可以了呢?^_^'</p>
<h3>實例</h3>
<p>我們可以先新建一個頁面,命名為fixed.html,下面寫開始寫css</p>
<pre>
/*隱藏htmml,body*/
html,body{height:100%; width:100%; overflow:hidden; margin:0}

/*用div偽裝body*/
div#body{
  position:relative;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:scroll;
  background:#fff;
  cursor:default
}

/*懸停的元素 id=fixed*/
div#fixed{
  position:absolute; 
  z-index:10;
  right:100px; 
  bottom:100px;
  width:400px; 
  height:300px; 
  background:#000;
  color:#fff; 
  text-align:center;

line-height:300px
}
</pre>
<p>xhtml</p>
<pre>
<div id="fixed">
	討厭,我怎麼不會動了啊?
</div>
<!-div id=body 為body--->
<div id="body">
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
  <p>test1</p>
</div>
</pre>
<h3>標準的,實用的(實在找不到形容詞了!)...</h3>
<p>我們給寫個小小的hack,使它兼容各個瀏覽器吧?好,請看下面</p>
<pre>
/*隱藏htmml,body===//我們在這裡只給ie6隱藏body,其他瀏覽器使用position:fixed*/
/*html,body{height:100%; width:100%; overflow:hidden; margin:0}*/
/*為了簡單...這樣ie6也認識*/
html,body{height:100%; width:100%; _overflow:hidden}
</pre>
</div>
</body>
</html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

div#fixed不在div#body裡面，如何會建立相對和絕對定位的關係.. 它在在相對誰絕對定位？
還有 body裡的單個div可以分塊下載，如果用一個大div當body用那會不會造成內容複雜效率不佳，先是一片空白，等內容加載完了才突然顯示？?

相對的是父容器，內容複雜效率不佳？那要看你如何架構你的佈局了，如果你不是亂嵌套的話，瀏覽器呈現是不會慢的！

[本日誌由 hanher 於 2007-12-12 04:57 AM 編輯]