位置相對 - 是什麼？ 詳細說明

HTML佈局是一個漫長的過程，謹慎，但非常有創意。 儘管對於大多數在IT領域工作的人來說，網頁的佈局似乎是一個無聊的例程，但是對於這樣的事情，專業人士不僅可以定性地執行任務，還可以從流程本身獲得實際的愉悅。

然而，在成為有經驗的網頁設計師之前，每個新手都花費了大量時間來學習HTML語言及其盟友CSS的各種說明和規格。 這是關於 CSS是 什麼，它是什麼，什麼“耳朵假裝”讓你起床，還有一個它的受歡迎的財產 - 位置相對 - 我們今天會談。

什麼是CSS？

縮寫CSS可以解密並翻譯成俄文作為“級聯樣式表”。 這聽起來很奇怪 - 一方面，像這樣的話可以理解，但另一方面，一般的意思就是一下子被抓住了。 讓我們從簡單開始 - 用風格。 該技術允許您在頁面上給出與外觀有關的某些特徵，其可以規定一次，但是使用無限次。

官方翻譯中的“桌子”一詞幾乎是偶然的，實際上使用“單”或“列表”這個詞是比較合適的，但原始翻譯的作者則認為CSS比列表更像是一個列表，而我們是誰現在他們被判斷。

最後，單詞“cascade”。 事實是，每個元素可以同時具有多種樣式，可以混合甚至相交。 在這種情況下，瀏覽器必須訴諸若干規則才能正確地組合具有多種風格的塊的外觀，其中一個具有位置相對性質，另一個是“絕對位置”。 事實上，這種衝突是不能容忍的，但在大型項目中，這種混亂經常發生。

所以，現在這個名字很清楚，我們來看一個簡單的例子。 假設您的網站上有大量的按鈕設計是以某種方式設計的。 它們具有尺寸，陰影，透明度，顏色等屬性。 當然，您可以指定這些參數，創建每個按鈕，但使用CSS將變得更加容易。 實際上，您需要描述一個類，其中將列出所有上述屬性的值，然後，而不是長時間枚舉，每個按鈕的標籤只需要指定此類的名稱，之後瀏覽器將以必要的顏色繪製這些元素並給出正確的“光澤”。

為什麼我需要Position屬性？

現在我們直接轉到Position屬性，為整個文章構想。 如果您熟悉英語或有良好的直覺，那麼您應該已經明白了 - 該屬性對元素的位置負責。 實際上，它不是定義一個特定的地方，而是告訴瀏覽器如何將一個項目相對於相鄰的整個頁面整體放在一起。

Position屬性可以使用什麼值？

我們的財產可以採取幾個不同的價值觀，只有五個。 這是每個人的簡要說明：

• 位置繼承 此屬性允許您複製作為父項的項目的位置數據。 例如，如果您有一個具有指定位置相對性的div，則帶有繼承值的內接IMG也將獲得相對值。
• 靜態位置 除非另有說明，否則此值將自動提供給所有元素。 元素符合代碼所述的位置，不適用於允許他們改變其位置的各種“美味”。
• 絕對位置 通常在需要創建“浮動”元素的情況下使用Position屬性的值。 具有此屬性值，該元素對於頁面的其餘部分保持“不可見”。 也就是說，它們的位置好像我們的絕對元素根本不存在。 他自己將永遠保持原位，無論頁面滾動多遠。
• 位置固定。 在許多方面，這個值與上一個值相似，但是絕對元素附加到父元素，固定的僅使用瀏覽器屏幕左上角的坐標，而不注意其前面的其他元素。
• 最後，相對位置。 這種類型的值允許您將元素相對於其他元素定位，這在創建自適應標記時可能很有用，在普通人中稱為“橡膠”。 擁有此屬性，該元素將“移開”其餘部分，而不會失去在頁面上更改其位置的功能。

在不同瀏覽器中使用職位的功能

並不是所有的瀏覽器都兼容。 雖然互聯網衝浪的大多數替代程序沒有任何掛起感覺到Position的價值是絕對真實的，“長期特殊的”Internet Explorer根據其版本來考慮這個屬性。

例如，使用已經埋入的IE6瀏覽器，您不能使用固定和繼承值 - 驢只會忽略它們。 然而，儘管事實上，自從第七版以來，情況開始得到糾正，而固定已經被處理了，為了繼承人們都喜歡“瀏覽器下載其他瀏覽器”只有第八種形式。

其餘的評論者靜靜地處理第一版本的位置，除了Opera，它在90年代中期發行的4個版本中獲得了該屬性的支持。

在JavaScript中使用職位

事實上，關於如何使用Javascript中的Position屬性的故事，我們僅僅是為了正派的緣故。 由於此屬性在名稱中沒有任何特殊字符，您可以使用JS而不進行任何更改，例如，要設置Position Relative div，您應該包括以下行：div.style.position ='relative'。

你可以看到，一切都很簡單。

為什麼位置相對值得特別注意？

雖然Position屬性的大部分值都是溫和地放在周圍的元素上，使用“style position：relative”這個值，但總是值得記住整個頁面，因為它的不正確的使用可以強烈地“扭曲”屏幕的整個內容。

此外，只有此屬性可以讓您輕鬆將固定設計轉換為自適應設計，因為它的應用程序會自動影響頁面的所有內容。 接下來，我們還有時間考慮使用這個值的例子和錯誤，你會在實踐中看到它的實際價值。

什麼時候應該使用相對定位？

除了常規HTML頁面的佈局，Position Relative還經常用於創建各種有趣的效果。 例如，如果你想要一個元素“來”到一個頁面，或者相反，順利地進入它的邊緣，那麼這個屬性可以幫助你實現這個“假”。

通過Javascript實現類似的“技巧”，或者如果您正在努力進行漸進佈局，則可以通過CSS3的屬性來配置變量值的循環更改。

此外，在某些情況下，可以創建“混合”位置相對值。 CSS，雖然不允許你同時設置像position：absolute relative，但是使用一些技巧，你仍然可以實現這個效果。 當您需要創建類似複雜的工具提示或上下文菜單的情況時，此方法可能會很有用。 考慮到這些例子，我們一定會描述這樣一個“混合”的結構。

使用相對定位的例子

位置相對是一個相當簡單但靈活的工具，可以實現許多有趣的效果。 為了不浪費時間和空間編寫無用的模板代碼，我們給出一些口頭的算法，可以裝飾您的網站或其各個頁面。

我們從“跑出去”行開始。 假設您需要一個將從屏幕左邊緣後方“行進”的元素，並逐漸向右側移動。 要實施這樣一個“機制”，你需要設定位置：相對; 左：-100px，其中-100是構成塊寬度的近似像素數。 此樣式將允許您將屏幕外的圖案隱藏起來，將其設置為“起始位置”。 現在，您可以使用一個腳本，每幾毫秒增加一個左邊屬性的值，直到它等於瀏覽器窗口的寬度減去元素的寬度。 結果，我們得到一個從左邊緣後面出現的塊，在整個屏幕上滾動並在其右側“停放”。

另一個例子允許你創建“相對絕對的”元素。 例如，您可以在另一個具有位置相對性的內部輸入絕對值。 因此，我們有一個“相對”的塊，沒有一個絕對的一個大小，能夠表現在一個取決於其前面的元素的位置的大小。

使用位置相對時的常見錯誤

使用“位置相對”時最常見的錯誤是許多佈局設計師忘記了為任何地方的塊預留空間的能力。 例如，如果你有一個相當大的屏幕，放在屏幕外面並具有相對定位，就會出現一個“孔”。 然而，即使這種財產，有時也會產生一些不便，可以用於好的，例如，創造一個有趣的效果，“自我收集”的網站，其中所有的塊逐漸放置在頂部：0位置; 左：0; 就是在原來的地方。