CSS Overlay技巧

時間 2019-11-14

標籤 css overlay 技巧欄目 CSS 简体版

原文原文鏈接

建立遮照圖有幾種技術：從使用絕對定位的元素到outline和僞元素。在本文中，咱們將探索每一個技術的實現樣式以及他們之間的利與弊。css

設計模式一般是一組最佳實踐和技術，主要目的是用來解決一些最多見的設計「問題」，一般是在上下文中提出的設計原則。這些原則之是一「停留在頁面」的原則。這一原則是創建在頁面刷新都打破用戶的心中想要的流程基礎上，形成所謂的「變盲」，咱們須要用戶不管保時何地能夠避免打破這種視覺流程。html

咱們能夠在保留用戶在網頁和模型的過程當中作出明智的選擇。一個方式，讓用戶在同一頁面上試圖讓內容在當前頁面的背景下，經過展現一個「迷你頁面」，或一個彈出的對話框。這個輕量級的層就是咱們所說的一個「浮層」。html5

輕量級的浮層圖能夠用來問問題，得到輸入，引入特徵，包括流程，給予指示，或展現信息。他們能夠直接由用戶激活事件(如，點擊一個動做，懸浮事件)或由Web應用程序在不一樣的階段完成一個動做——Designing Web Interfacescss3

當用戶交互只接受在彈出窗、燈箱廣告效果的應用和其餘的頁面，顯示會變得暗下來。git

本教程的目的是向你介紹向個方法，使用CSS建立黯淡的疊加效果，複習他們的技術，並肯定各自的優缺點。github

技巧1：絕對定位的元素

第一種方法，使用頁面上的HTML元素的絕對定位來建立浮層疊加效果。在模板中使用一個空的div標記，使用CSS的絕對定位給這個div指定一個高的z-index值，確保這個空的div保持在頁面其餘元素的頂部，除了疊加在這個層上面的彈出窗口，須要設置一個更高的z-index值。web

<html>     <body>         <div class="overlay"></div>         <!--...-->     <body> <html>

假如咱們給一個空的div標籤添加一個.overlay類名，使用CSS定位，將這個層疊加在頁面上面：設計模式

html, body{ min-height: 100%; } body{ position: relative; } .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,0,0,0.5); /*暗淡的背景*/ }

代碼很簡單，使用這種技術有幾件事須要注意。瀏覽器

首先，你須要確保浮層的絕對定位是相對於body。所以，若是浮層包含在另外一個div中，並且這個div設置了相對定位，那麼疊加定位是相對於其容器，而不是頁面的body。因此，你要麼讓這個覆蓋層是body的子元素，或者確保它的全部祖先元素沒有設置爲relative。app

同進，你須要確保你的頁面內容擴展到窗口底部或更多，由於body的擴展以適應其內容的高度(假設內容不是絕對)，若是沒有足夠的內容來擴大body的高度到窗口的底部。這個時候須要將浮層的高度設置爲body高度的100%，否則達不到視窗的底部，也沒法覆蓋它。

爲了不這種狀況，不提心頁面上的內容數量，仍然須要一個和視窗大小的疊加層，你須要設置一個相關於html和body的高度。

若是你給html元素設置了100%高度(100%高度是相對於視窗高度)，同時給body設置一個100%高度(相對於html元素)，此時兩個元素的高度都是相對於視窗的100%，視窗不管有多深的內容，他們的高度仍然沿着內容高度延伸，等同於視窗高度，因此浮層的高度也同樣。

在這種狀況下，若是你向下滾動頁面，疊加層也將滾動起來，你會看到它下面的內容沒有覆蓋，也就是說覆蓋被切斷。

解決文案是給html元素和body元素設置一個最小高度，在大多數狀況下是可取的。經過設置一個最小高度，你會確保他們的高度達到視窗的底部，並隨着內容增長而增長。最後，要使浮層的高度增長，讓他隨內容滾動覆蓋整個頁面內容，你必須在body上設置一個position:relative，讓浮層的高度擴展到body的高度。

另外一件事情要注意，這種技術不須要給z-index設置一個很高的值。當他們位置重疊，或頁面上元素在另外一個元素之上，不少開發人員傾向於給z-index設置一個很是高的值，如z-index:999999。這是沒有必要的。大得多狀況之下，給z-index設置值爲10,有時甚至更少，就足夠讓一個元素在其餘元素之上。你只須要知道，若是其餘元素指定了z-index值，你要將浮層的z-index值設置高於其餘元素。

最後，你還須要記得，在這種技術中，你須要添加一個空的div標記，固然這樣是沒有語義的。

使用這種技術的優點是，它支持全部主要的瀏覽器，和其餘老瀏覽器，到IE8。

我已經創建了一個JSBin，因此你能夠在這裏測試你的結果。嘗試將html和body元素min-height換成height，或刪除body中的relative，看看當你滾動的時候浮層如何被切斷。

技巧2：固定定位元素

第二種方法你能夠添加一個很是相似於前一種方法的覆蓋層，並在結構中使用相同的.overlay元素，但相反的定位浮層是絕對定位，你給它一個固定的位置和一個完整的寬度和高度來覆蓋整個視窗。而且因爲本例中的浮層是固定的，不管你怎麼滾動，浮層是固定住的，覆蓋了整個窗口的區域。這也是咱們想要的東西。

.overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,0.5); }

不像絕對定位的元素，相對於設置了position:relative的容器，而固定定位是相對於視窗：

設置了position:absolute的元素的位置和大小是相對於包含塊的位置和尺寸；設置了position:fixed的元素的位置和大小是相對於最初的包含塊。這一般是視窗：瀏覽器窗口或頁面的框。——W3C Wiki

一般，當使用固定定位，你沒必要擔憂浮層的div在結構中放置在哪裏。不管你把它放在哪裏，都會獲得一個相對於視窗的固定位置，除非你改變浮動的祖先元素，在這種狀況下，轉換元素包含了爲全部後代元素定位的包含塊，即便是那些獲得一個固定定位的元素。這個事實坑了不少開發人員，包括我本身。因此，若是你發現本身修復一個元素和結果並不像你所預期的那樣，你要檢查固定的元素的後代元素是否已經被改變。

再次，使用這種技術，咱們添加了一個空元素標記，這違背了標記語義化。那麼，咱們怎樣才能避免這種狀況呢？

技巧3：使用僞元素

爲了在咱們的標記中避免增長空元素，咱們可使用僞元素來建立浮層。

在這種技術上樣式和注意事項和之前基本上同樣，咱們將在body上使用:before或:after僞元素上寫樣式來代替給.overlay空元素。

html, body { min-height: 100%; }  body { position: relative; /* 若是給僞元素設置絕對定位，須要先設置相對定位 */ }  body:after { content: ""; display: block; position: fixed; /*也能夠設置絕對定位*/ top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,0.2); }

你能夠給僞元素相對於body元素設置絕對定位，也能夠給他設置固定定位。無論你選擇什麼，你不得不考慮咱們前面提到的兩種技術。

能夠看看這個例子：

有一點很是重要，僞元素的過渡效果到如今在Safari和移動端的Safari也沒法支持，因此這是一個巨大的缺點，若是你要使用一個僞元素來建立浮層，你要考慮這個方法不能給用戶提供光滑的動畫浮層效果。

技巧4：應用巨大的outline

這種方法不須要任何額外的元素來建立暗淡的背景浮層效果。相反，你可使用一個彈出窗口的outline，並將其值設置得很大，來實現浮層效果。

提出這種技術的是Lea Verou，而且她是第一個在Twitter上分享。

假設在模板中有一個元素實現彈出窗口，也將出現一個浮層：

<div class="modal">I'm the Modal Window!</div>

當彈出窗口在頁面其餘元素之上，可使用一個大的outline值，將它做爲浮層的背景層。outline一般設置一個很是大的值，它須要足夠大，以確保它的大小能覆蓋整個視窗的大小。

.modal { /*彈出窗口定位在頁面中間的樣式*/ position: fixed; top: 50%; left: 50%; width: 300px; line-height: 200px; height: 200px; margin-left: -150px; margin-top: -100px; background-color: #f1c40f; text-align: center; /* 浮層須要的樣式 */ z-index: 10; /* 保持在其餘元素上最上面 */ outline: 9999px solid rgba(0,0,0,0.5); }

固然，你不能忘了設置z-index值，讓彈出窗保持在頁面其餘元素之上。

要記住的一件事情，在這裏當你使用這種技術實現浮層效果，不能防止鼠標與其餘頁面元素的交互。當你點擊頁面上的其餘元素，你不能防止指針和鼠標事件，在大多數狀況下，這多是一個不良的效果。因此在你的效果中，你要考慮是否使用這種技術。

還請注意，在邊框外面使用了一個巨大的outline，在此處沒法使用border-radius。在咱們的例子中若是你有一個邊界使用了圓角，你將注意到會有一個缺口。若是你的彈出窗口要使用一個圓角，這可能不是一個好的選擇。

技巧5；在彈出窗口應用一個大的box-shadow

該技術與前面示例惟一的區別是，在彈出窗口沒有使用巨大的outline，而是使用了一個box-shadow。

.modal { /* 彈出窗口居中樣式 */ position: absolute; top: 50%; left: 50%; width: 300px; line-height: 200px; height: 200px; margin-left: -150px; margin-top: -100px; background-color: #f1c40f; text-align: center; border-radius: 5px; /* 浮層的樣式 */ z-index: 10; /* 保持元素在頁面其餘元素之上*/ box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); }

效果是大同小異：

固然，這種技術也不能阻止與頁面其餘元素之間的交互。

如今，儘管說起使用這種技術做爲一個建立浮層的方法，但我強烈建議你不要使用它來建立浮層。甚至更多的是，在你的頁頁和應用中不要使用太多的陰影效果。

box-shadow結合其餘樣式，好比說border-radius或者大量使用將會給性能帶來一個巨大的瓶勁，甚至會使用的應用程序沒法在智能手機和平板電腦上使用，由於他們很不想在應用程序中使用box-shadow。

box-shadow的渲染是昂貴的，在固定元素使用大的陰影變得更爲糟糕，由於當頁面滾動時會強迫瀏覽器重繪。特別是在Firefoxk ，固定元素和大型的CSS陰影會讓它變得更慢。

因此，在您的應用程序中儘可能避免使用太多的大的box-shadow，由於它將會是一個顯著的影響應用程渲染。當你發現你要使用大量的盒子陰影的狀況下，你至少能夠嘗試在智能手機和平板電腦中刪除這些盒子陰影效果，而且經過一些特殊技術，爲這些設備提供後備的樣式。

技巧6：使用`<dialog>`元素

最後一種技術，咱們將討論的是一個至關新的技術，也是很是棒的！並且用來建立一個彈出層或對話框，這種技術是最具語義化的。

彈出窗如今能夠輕鬆的使用dialog元素來建立。dialog元素能夠在頁面內部提供一個對話框的功能。一個在Dom中的對話框，可使用普通的CSS樣式。

dialog元素表示一個應用程序的一部分，能夠用於用戶執行任務，例如一個對話框、浮層或彈出窗口。——WHATWG HTML Spec

HTML中的dialog元素有四個主要特徵，而這些特徵中就有三個用於製做浮層的特性讓咱們最感興趣(第四個特徵在寫這篇文章時尚未實現)：

默認情u狀況下，當打開一個對話框時，他是垂直居中的。它仍然是絕對定位的，因此它也能夠滾動。 DOM中的dialog定位始終會是在視窗的中間位置。
dialog是一種模式。當一個dialog打開，它會鎖定文檔其餘部分。
dialog是全屏的，而且也放置在最頂層。dialog模式在最頂層。因此你不須要擔憂須要使用z-index來保持彈出層放置在頁面其餘元素之上。

至關不錯，對嗎？默認狀況下，彈出層在頁中處於居中位置，但如前面第一點所述，它使用絕對定位，因此它能夠滾動。你能夠在你的樣式中覆蓋默認的絕對定位。若是你決定改變固定的位置，你也能夠經過top和left值來改變。

dialog元素能夠放在DOM中的任何地方：

<dialog class="modal">This is the dialog!</dialog>

能夠在樣多中像其餘塊元素同樣來設置dialog的樣式：

.modal{ /* 任意樣式 */ background-color: white; border-radius: 5px; box-shadow: 2px 2px 2px rgba(0,0,0,0.2); height:200px; width:300px; /* 設置彈出窗固定在頁面，而且居中顯示 */ position:fixed; top:50%; left:50%; margin-left: -150px; margin-top:-100px; }

dialog元素也有僞元素叫做::backdrop，用來設置彈出層後的背景樣式，從而建立浮層效果。咱們前面使用了五種技巧，只有這一次，你可使用默認的元素和僞元素建立浮層效果。

因此，使用HTML的dialog元素建立一個浮層效果，你只須要給dialog元素的僞元素設置一個背景色，交且定位，讓他大小等於視窗大小：

.modal::backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); }

結果看起來像這樣：

如今你使用了dialog元素建立了一個浮層。

爲了使用工做變得更簡單，dialog提供了一個API，能夠經過show()和hide()這樣的函數讓對話框顯示和隱藏。

你能夠經過Eiji Kitamura的示例能夠了解更多關於dialog元素及其API。當你在瀏覽器中查看它時，示例運行在一個polfill模式中。

結束語

我認爲咱們已經覆蓋了幾乎全部的技術，你可使用它來建立一個彈出的對話框。正如你可能已經猜到了，在最後一個技術介紹的是使用dialog元素建立一個彈出窗，但在撰寫本文時，它僅僅只有Chrome Canary瀏覽器支持，須要開啓polyfill變量。因此你如今試使用，你要考慮你的瀏覽器的兼容性。可是一旦全部瀏覽器都支持它，它將是建立彈出窗口的最好方式，並且還有不少特性能夠用來處理它。

我但願你喜歡這篇文章，而且有所用。感謝您的閱讀！

你知道其餘的CSS技術來建立彈出窗口嗎？若是您有這方面的方法，能夠在下面的評論中分享。

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了我的對技術的理解。若是翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載，煩請註明出處：

英文原文：http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

中文譯文：http://www.w3cplus.com/css/css-overlay-techniques.html