標籤: css

如何處理Flash圖層會蓋過div的問題

問題描述：Flash不管放哪，即使div的z-index比較大，Flash還是會蓋過div

原因：官方解釋 A Flash movie in a layer on a DHTML page containing several layers may display above all the layers,  regardless of the stacking order (”z-index”) of those layers.
但是，只有設定z-index是沒有用的。網路上有很多種方法，我是用這個方法處理

  1. 要加上<param name=’wmode’ value=’transparent’>，這個是讓flash可以有透明背景的屬性，加了這個之後，z-index也才會生效，不然會永遠蓋再最上面。
  2. 在embed標籤內加上wmode=”transparent”，這個是針對使用embed標籤的瀏覽器（例如IE），效果跟上面一樣，只是用的標籤不同。
  3. 然後用div把flash包住之後，設定z-index，要設定小一點
  4. 把要壓在flash之上的設定z-index，設定大一點。
  5. 還是不行就加上position:absolute;

css內的大於與加號

大於的用法

用法一：把多個同樣層級的子元素一起加上同個樣式
參考文章：http://null.wehan.net/511

如果沒用大於，假設#all內的h1~h6都要加同樣的顏色，寫法會是
#all h1,#all h2,#all h3,#all h4,#all h5,#all h5{color:#fff;}

如果用大於可以改寫成
#all > h1,h2,h3,h4,h5,h6{colorL#fff;}

要注意到的是，這個大於只針對子元素。如果hx跟#all的關係不是子元素、而是孫元素，就不會被套用。

實做後有誤，後來仔細想想，加了逗號(,)的項目基本上就跟前面的> 沒有關係了，所以這個寫法本身有問題。有沒有比較好的寫法要再想想。不過剛剛熊熊想到，如果要針對不同元素下同一屬性，加 class不就好了 …..囧

用法二：只針對相同標籤、但屬於子元素者加樣式、孫元素不加
參考文章：http://www.cnblogs.com/image/archive/2010/11/15/1877735.html
因為只針對子元素，所以假設原始碼為
<ul>
<li>A</li>
<li>B</li>
<li>C
<ul>
<li>C-1</li>
</ul>
</li>
</ul>

<div>
<p><span></span></p>
<span></span>
<span></span>
</div> 

如果寫法是
ul li{color:#fff;}
div span{color:#fff;}
所有 li 都會是白色，所有span都會是白色，但是如果改寫成
ul > li{color:#fff;}
div > span{color:#fff;}

只有在ul div下第一層的 li 第二、三個span會是白色，li p底下的 li span不會被影響。
我終於知道為什麼 wordpress 寫選單的時候會大量使用到大於符號了….

我原本寫的範例錯了。不能使用同樣標籤，不然孫元素會繼承子元素的的樣式，因此失去用 > 過濾的機制。

加號的用法
參考文章：http://null.wehan.net/479

加號指兄弟節點，等於把樣式只套用在+之後指定的兄弟節點上， +之前的則不套用該樣式

IE6、IE7的z-index bug

問題描述：

假設三個div， 依序為A、B、C，裡面個包一個div，分別為A1、B1、C1。如果設定position:absolute在A1跟C1上。且A1設定z-inde:2，C1設定z-index:1，在FF正常顯示下，A1會壓在C1之上。

但在IE6、IE7底下，當C1設定position之後。他們會自動給C一個z-index，且C因為排在A之後，所以C以內的區塊z-index永遠壓在A之上，不管A 或A以內的z-index正值設定多大都一樣。

解決方式：

  1. 把C設定z-index為負值。但這個作法有個很大的壞處，就是C裡面的超連結全部都會被遮蔽，以至於無法使用。
  2. 因為通常會出現這個問題，是在表頭的下拉選單會被底下的蓋住，所以更好的作法是表頭設定position:relative;並且加上z-index:2;或更大的數值，後面那個一定要加，不然一樣沒效。這樣底下的區塊超連結也會不被遮蔽。這個原理跟利用margin設定製作圖div覆蓋效果 所提到的是相同的。

CSS兩欄排版的問題

由於要做兩欄排版、且邊欄的高度要自動延伸的話，要在最外框的DIV使用overflow屬性。假如這時候在內容需要使用點選超連結移動到命名錨點時，會發現移動到命名錨點後，以上的內容不見了。不管使用哪一種瀏覽器都一樣。

這是因為overflow需要設定hidden所致。等於點到命名錨點的時候，不是整頁移動，而是只有子元素的內容移動，而超出父元素之外因為hidden的設定因此就被隱藏了。

但是為了要可以做成邊欄可延伸的排版，overflow此屬性不可能移除。因此解法是替需要點選超連結移動到命名錨點的頁面，加上網頁錨點平滑移動效果，就不會有內容不見得問題。

使用說明參考連結
http://www.webppd.com/thread-2709-1-1.html

平滑錨點移動效果demo
http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html

margin塌陷問題

狀況一：
在父元素div裡面的第一個子元素，如果有margin-top的時候，margin-top會被父元素的div搶走。最後一個子元素的margin-bottom也會被父元素的div搶走。

解法：有兩種，我是用把父元素的overflow設定成hidden的方式。另外看到有人說把子元素設定成inline-block也可以。可參考這篇。實作上，父元素如果設定float，也會避免掉這個問題。

狀況二：
兩個層級相同的子元素，上面的有margin-bottom，下面的有margin-top時。會有塌陷的問題，於是他們之間的間距不會是bottom+top，而是看誰大就用誰。

解法：這其實沒什麼特別解法，反正就是只用一邊的margin就好，比較單純。

利用margin設定製作圖div覆蓋效果

透過將margin設定為負值，並搭配postion:relative;與z-index可以控制同等級的div前後覆蓋的順序。要注意到的是子元素一定會蓋在父元素上，要相疊的兩個div層級要相同。預設在結構上排在越想被蓋在上面的div，只要設定relative，配合margin設定負值，加上z-index，就可以不使用絕對定位的調整div層疊的順序。

以下面這段原始碼為例子
<div id=”all”>
<div id=”a01″>
</div>
<div id=”a02″>
</div>
<div id=”a03″>
</div>
</div>

#a01~#a03是同等級的。
如果希望a03蓋在a02、a01之上，比較單純，因為a03在順序上排在比較下面，因此預設圖層順序排在比較上面，只要在a03設定以下屬性，就可以覆蓋在a02跟a01之上
#a03{
margin-top:-20px;}

如果希望a02蓋在a01 之上，那設定一樣。但是假設在排版上希望a02顯示在a01的上方，但是又希望a01在圖層順序上壓在a02之上的話要怎麼做呢？
#a01{
position:relative;}
這樣設定就可以了，如果有多層的話，就搭配z-index
#a01{
position:relative;
z-index:5;}

所有同層級的div，只要設定 position:relative; 就可以使用 z-index 決定看哪個div要壓在上面。所以有的定位可以用這個方法取代position:absolute;（因為據說畫面上用太多position:absolute; 有時候會造成奇怪的問題）

 

IE6使用fliter處理png後，連結無法點選的問題

參考文章：利用 AlphaImageLoader 解決 IE6 對 png 圖檔的透明問題

IE6底下使用png時，必須使用fiter的方式，png才能正常顯示不會出現醜醜的藍色。但是修正完畢後，如果裡面放了文字、連結、圖片等東西，會發現內容完全選不到，更不用說要點選連結，就好像內容被一個模包住碰不到一樣。

這個時候，就要用另外一個解法，把希望要被點選的東西再包到一個div內。然後在該div上（不是設定png背景圖的div，該div的子元素）加上position:relative;

結論：如果都要修，我寧可IE6不要用png，改用gif處理，會比較單純。因為這個修法要特別為IE6去改html。