ianreedgerald

歐羅默語翻譯翻譯社

CSS 以下：

當 position 為 fixed 時，要擺佈置中的作法和平常不太一樣。如果你看太小正正之前的教授教養，還記得平凡擺佈置中的寫法是 margin:0 auto，將擺佈兩側的界限設為主動。但在 position 為 fixed 時如許寫是沒用的，要改為 left:50% 距離左方 50% 的位置，這時候元素就會被定位到頁面的正中心 (假如頁面寬度是 800px，會被定位到 400px 的位置)翻譯但定位是按照元素左上角的座標，不是元素中間點的座標，所以天成翻譯公司們必須把元素自己的寬度斟酌進去，再加上 margin-left:-200px 把左邊界設為負的 200px，讓元素往左移動 200px。因為元素的寬度是 400px，所以設為 200px 恰好是一半，便能讓元素的中間點和頁面正中心對齊了翻譯想像一下，left:50% 先將元素的左邊對齊頁面正中心了，再用 margin-left:-200px 將元素向左移動一半，讓中心點對齊頁面正中心。

這段 expression 是針對 IE 6 才需要使用，IE 7 不需要，所以屬性 top 的前方也是加了底線。小正正再次提醒你，CSS Hack 盡量罕用，還有 expression 也是一樣的，它長短標準的器材。想當年 IE 7 剛出來時，小正正將 Yahoo! 許多網頁改版成讓 IE 7 能正常瀏覽，一泰半的問題都是出在 expression，而另外一小半的問題幾乎就是 CSS Hack 了。

起首讓我們來看看頁首的作法，HTML 碼以下：

<div id="fiexd-header"><h1>CSS 範例 - position:fixed 固定位置不捲動的內容</h1></div>

#fixed-center{
  background:#FFFF99;
  color:#FF6600;
  font-weight:bold;
  border:1px solid #990000;
  padding:10px;
  width:400px;
  height:200px;
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-200px;
  _position: absolute; /* position fixed for IE6 */
  _top:expression(documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight)/2);
  _margin-top:0;
}

怎麼辦呢？還好 IE 還有一個特異功能叫做 expression，可以在 CSS 裡面寫程式！我們只好靠這個程式來解決 position:fixed 的問題了：

<div id="fixed-ad">這是廣告</div>

根基樣式

再來一樣用 position:fixed 來做定位，讓它不會因為頁面捲動而移動位置。並且讓它上下閣下都能置中對齊：

這時用 IE 6 來測試成績，頁首就已能夠一向連結在瀏覽器視窗的上方了，但捲動頁面內容時頁首卻會一跳一跳或呈現閃灼的環境，這又是 IE 的另外一個 bug 了！（IE 真是蟲蟲危機啊～）解決的方式很簡單，在原有 CSS 的前面加上另一段 CSS：

CSS 的部份和其他區塊幾近都一樣，沒什麼特別的，分歧的只有對齊位置用的 top、right 樣式屬性和 expression 的寫法：

風行的網頁告白，是一張小圖或小區塊在網頁的右上角，當頁面捲動時這個廣告會隨著一起捲動，是以非論頁面捲到哪，告白都邑一向顯示在畫面上、一直都可以看獲得翻譯

批改 IE 6 不支援 position:fixed 的問題

#fixed-ad{
  background:#FF0066;
  color:#FFCC99;
  border:4px solid #FF9999;
  padding:5px;
  width:80px;
  height:120px;
  position:fixed;
  top:100px;
  right:10px;
  _position: absolute; /* position fixed for IE6 */
  _top:expression(documentElement.scrollTop+100);
  z-index:3;
}

只是一個 div 包著 h1 罷了，而且這個 div 的 id 叫做 fiexd-header。在還沒有入手下手定位之前，先設定一下顏色、大小等根基樣式，讓它漂亮一點。以下是 CSS 的語法：

#fixed-center{
  background:#FFFF99; /*靠山色彩*/
  color:#FF6600; /*文字色彩*/
  font-weight:bold;  /*粗體字*/
  border:1px solid #990000; /*周圍邊框*/
  padding:10px; /*內距*/
  width:400px; /*寬度*/
  height:200px; /*高度*/
}

其實正常來講應當做到上面那個步驟就可以了，你利用 IE 7、Firefox 或 Safari 瀏覽器來測試，都已可以或許到達我們想要的結果。但惟獨 IE 6 有問題... 因為在 IE 6 中的 position 根本不支援 fixed 這個值啊！

#fiexd-header{
  background:#66CCCC; /*後臺顏色*/
  color:#FFFFFF; /*文字顏色*/
  border-top:2px solid #336699; /*上方邊框*/
  border-bottom:2px solid #336699; /*下方邊框*/
  width:100%; /*寬度*/
}

起首一樣先設定基本的外觀樣式，CSS 語法以下：

和頁首分歧的是，頁尾的寬度是固定的，並且左右置中對齊，所以會加上 left:50% 和 margin-left:-300px。固然，翻譯公司想要點竄為 100% 的寬度也很簡單，相信看到這裡你應當已經能夠自行轉變調整了吧！而在 expression 的最後有一個 -4，是因為頁尾的上下各有 2px 的邊框，所以在計算座標時別忘了將邊框的巨細也算進去。

這段 CSS 語法很簡單，並且都有加上註解，應當沒有什麼問題翻譯有一個小處所要特別注重一下，我們將寬度設為 100% 進展區塊和瀏覽器視窗一樣寬時，就不要再加上閣下方的邊框和閣下方的邊界 (margin) 了，如果有邊界的話最好設為 0。因為寬度已 100% 了，假如再加上邊框或界限的巨細時，就會跨越 100%，這時候瀏覽器就會不知不覺的呈現橫向捲軸了！除非你真的希望它有橫向捲軸。

<div id="fixed-center">
  <h2>這是上下擺佈都置中對齊的區塊</h2>
  <p>這個類型使用IE5.5全失效；IE6(全ok)；IE7 IE8(RC1) Firefox 2 Firefox 3 Opera9.64(除上方固定失敗)  測試過...... </p>
</div>

幫 html 和 body 這兩個元素加上一個固定不動的後臺圖片，而且背景圖的 url 隨便給一個不存在的檔案也沒關係，如許就自然而然解決了頁面捲動時頁首閃爍的問題了！傑克，這真是太奇異啦！小正正也不知道為什麼，就當作以毒攻毒，用 bug 去解決另一個 bug 吧！

position:fixed 時的置中對齊

html翻譯社body{
background:url(nothing.txt) white fixed; /* prevent screen flash in IE6 */
margin:0; padding:0;
}

#fiexd-header{
  background:#66CCCC;
  color:#FFFFFF;
  border-top:2px solid #336699;
  border-bottom:2px solid #336699;
  width:100%;
  position:fixed; /*固定位置定位*/
  top:0; /*距離上方 0 像素*/
  z-index:1; /*重疊時會在其他元素之上*/
}

在這裡天成翻譯公司們也將 html 和 body 的鴻溝和間距設為 0，讓頁首可以完端賴上對齊翻譯到這裡頁首的部分就全數完成啦！

用 position:fixed 固定位置

靠下對齊

< div id="fixed-footer">這是底部......< /div>

接著來看正中心阿誰上下閣下都置中對齊的內容區塊，HTML 碼是這樣的：

最後是靠下方對齊的頁尾區塊，幾近都是用不異的手法，只要注意對齊位置用的樣式屬性 bottom:0 和 expression 即可。HTML 碼以下：

是以在這裡我們專程分開用 border-top 和 border-bottom 去設定上下邊框，不要左右邊框翻譯假如直接寫 border:2px solid #336699 的話上下閣下城市有邊框，便會呈現厭煩的橫向捲軸。

批改 IE 畫面閃灼的問題

靠右上方對齊的那個小區塊，很近似初期雅虎奇摩首頁十分風行的一種告白翻譯它的 HTML 碼以下：

我們但願當頁面內容捲動時，這個頁首的區塊不會隨著一起捲動，可以或許在固定的位置一直顯示在畫面上。這時主角登場啦！讓天成翻譯公司們幫他加上 position:fixed：

不論頁面捲到哪，讓頁首的 top 一向連結在捲動後視窗最上方的位置，看起來的結果就像是頁首一向連結在畫面的上方不動了，事實上頁首相對於全部文件最開首的座標是一直在改變的，由這段 expression 程式來處置翻譯

加上 position:fixed 便能讓這個元素固定位置，不會跟著頁面一起捲動，這是標準的 CSS 裡面就有的功能翻譯而我們但願它一向固定在瀏覽器視窗最上方的位置，所以要加上 top:0。再加上 z-index:1 讓它的內容堆疊在其他網頁內容之上，不會被蓋掉翻譯

_top:expression(documentElement.scrollTop+"px")

#fixed-footer{
  background:#CC99CC;
  color:#333333;
  text-align:center;
  border:2px solid #999999;
  padding:5px;
  width:600px;
  position:fixed;
  bottom:0;
  left:50%;
  margin-left:-300px;
  _position: absolute; /* position fixed for IE6 */
  _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-4);
  z-index:4;
}

各版test畫面

豈論頁面怎麼捲動，元素都要上下置中對齊，座標的較量爭論體式格局是瀏覽器視窗的高度 (documentElement.clientHeight) 減去元素的高度 (this.clientHeight) 除以二後再加上頁面捲動後最上方的座標值 (documentElement.scrollTop)。並且這時候 top 距離的位置已由 expression 計較好了，不是 50% 了，就不需要再加上個負數的界限來做調整，是以再加上 _margin-top:0。

哇～ 題外話太多讓我們回到正題，針對 IE 6 設定 _position:absolute 以後，光靠 top:0 將頁面臨齊上方是不敷的，當頁面捲動時頁首仍然會跟著一路跑出畫面不見。所以我們針對 IE 6 將 top 的值設為一段 expression 程式，而程式的內容就是獲得頁面捲動後最上方的座標值 documentElement.scrollTop 再加上 "px" 這個字串：

• absolute：用來設定相對於頁面或某個元素的絕對座標位置。
• fixed：相對於瀏覽器視窗的固定座標位置，不會隨著頁面捲動。
• inherit：繼承，和父元素有不異的值。
• relative：相對於本身自己的座標位置。
• static：靜態的，所有元素不指定的 position 時都是屬於這一種翻譯

CSS 有一大堆用來設定文字、顏色、邊框、區塊巨細...等等的樣式屬性，而其中一個和排版最有關係的是 position，顧名思義就是設定位置、定位用的。position 這個樣式屬性可以接管五種值：

#fiexd-header{
  background:#66CCCC;
  color:#FFFFFF;
  border-top:2px solid #336699;
  border-bottom:2px solid #336699;
  width:100%;
  position:fixed;
  top:0;
  z-index:1;
_position:absolute; /* position fixed for IE6 */
     _top:expression(documentElement.scrollTop+"px");
}

上下居中也是一樣的，top:50% 先將元素的上方對齊頁面正中心了，再用 margin-top:-100px 將元素向上移動一半 (元素高度為 200px)，讓中心點對齊頁面正中心翻譯

Position is Everything

 CSS 一個 "聖經" 級的網站，站名很有趣，叫做 Position is Everything (定位就是一切啊！)翻譯這個網站專門切磋各家瀏覽器在處置懲罰 CSS 定位時的產生的 bug，因為利用 CSS 排版會導致網頁版面亂掉、或是在不同的瀏覽器中看起來紛歧樣，罪魁禍首幾近都是這些 bug。如果翻譯公司想知道 IE 在 CSS 上有那些 bug 和如何解決，到這個網站去看準沒錯啦！

註ie5.5全失效、ie6全ok ie7、8 firefox、opera 除了上方失敗

（註：這裡所說的 "元素" 是 HTML element，也就是 HTML 標籤。）

#fixed-center{
  background:#FFFF99;
  color:#FF6600;
  font-weight:bold;
  border:1px solid #990000;
  padding:10px;
  width:400px;
  height:200px;
  position:fixed; /*固定位置定位*/
  top:50%; /*距離上方的位置*/
  left:50%; /*距離左方的位置*/
  margin-top:-100px; /*上方邊界*/
  margin-left:-200px; /*左方界限*/
}

起首將 position 設回為 absolute 而不是 fixed，因為只有 IE 6 需要如許做，所以在屬性 position 前面加了一個底線 (中間不要空格)，這種非標準的寫法只有 IE 6 看得懂 _position 代表 position，IE 7、Firefox 和其他瀏覽器都看不懂，便會直接疏忽掉這個屬性翻譯這是 IE 6 CSS 的 bug 之一，而這類哄騙瀏覽器的 bug，寫一些讓某種瀏覽器看得懂、某種瀏覽器看不懂的 CSS 語法，我們稱為 CSS Hack。

除底線之外，CSS Hack 其實太多啦！因為 bug 真的許多，有愛好的人可以搜尋一下關鍵字 "CSS Hack"。不外 CSS Hack 建議盡可能罕用，能不消則不消，平日長短不得以才去使用它的。因為 CSS Hack 屬於 bug 的一種，當瀏覽器改版進級後，bug 便消失了，以前看得懂的 CSS Hack 語法可能釀成看不懂了，或之前看不曉得可能釀成看得懂了！假如你在網頁中利用了大量的 CSS Hack，那麼用新版本的瀏覽器來看原本的網頁，會變得亂七八糟的緣由之一有可能就是因為 CSS Hack。有些人會覺得利用 CSS Hack  很神，好像代表自己很利害，但是小正正其實不希望大師太專心去研究 CSS Hack，只要知道幾個根基的能應付今朝的狀態就能夠了，否則等到 IE 8 一出來時又要死一堆網頁、又得花一堆時間來抓蟲蟲了！

在之前的文章 "CSS 相對定位技巧" 已教各人利用過 absolute 和 relative，如果健忘或還沒看過的人連忙去溫習一下吧！在此次的典範榜樣中，天成翻譯公司們所利用到的就是 fixed 這個值

到這裡 IE 7 和 Firefox 等支援 position:fixed 的瀏覽器都 OK 了，剩下的就是處置懲罰 IE 6 的部分。和前面溝通，用底線的 CSS Hack 再加上 expression，因為對齊的座標位置分歧，所以 expression 的程式會有小小的分歧：

靠右對齊