1. 因為事先標準就已經在文字的后面顯示，設置absolute之后因為跟隨性仍然是在原來的文字，然后再設置margin實現定位即可

2. absolute正業之元素隱藏

元素隱藏與顯示是我們在頁面制作與交互效果實現中非常常見的，如果您只是使用display:none與display:block/inline來實現DOM元素的顯隱控制，那你就out了。就元素的顯示與隱藏實現，使用display在有些時候算是比較糟糕的方法了

absolute屬性相關的隱藏方法，我知道的有三種，分別如下

使用absolute屬性控制DOM元素的顯隱有三個關鍵點：頁面可用性，回流與渲染，配合JavaScript的控制

2.1 可用性隱藏

所謂可用性隱藏，就是兼顧屏幕閱讀器這類互聯網閱讀輔助設備的隱藏方式。Yahoo! 可用性實驗室成員Ted Drake就不同隱藏方法下屏幕閱讀器的可用性問題作為測試，結果發現下面兩種隱藏方式屏幕閱讀器是讀不了的

所以，從可用性角度而言，像“選項卡內容”，“更多收起展開”這類元素隱藏與顯示就不推薦使用display:none， 或者是position:absolute + visibility:hidden

例如優酷網電影或視頻的簡介中“顯示詳情”的實現就是使用的display:none，如下截圖

而大眾點評網的隱藏層多采用position:absolute + visibility:hidden的方法，如下截圖

上述隱藏內容其實都是有用的信息，對于像盲人這類需要借助屏幕閱讀器的用戶無法知道這些信息了。拿優酷的那個例子，盲人用戶就無法知道影片完整的簡介

如果希望隱藏內容能夠被輔助閱讀設備識別，就不能使用display:none以及visibility:hidden隱藏元素。可以使用模擬隱藏的隱藏方法，又稱可用性隱藏。就是下面兩種隱藏方法

2.2 配合JavaScript的控制

說到元素的顯示與隱藏，免不了與JavaScript的交互。例如display相關的隱藏于顯示，就是display:block/inline/inline-block/…與display:none

要讓元素隱藏，很簡單，直接：

但是，如果要顯示隱藏的元素，咋辦呢？因為不同的標簽所處的display水平是不一樣的，于是，我們很難有一個簡單的統一的顯示方法。例如，下面的代碼可能使用于div, p標簽，但是對于span等inline水平的元素，可能就會嗝屁了（原本單行顯示結果換行）

而使用絕對定位實現的一些元素隱藏方法的控制就相對簡單很多的。例如：position:absolute + visibility:hidden方法，當我們要讓元素（原本非絕對定位元素）顯示的時候，我們需要設置

而類似的position:absolute + top:-999em方法，當我們要讓元素（原本非絕對定位元素）顯示的時候，我們只需要設置

而無需擔心原本標簽的是inline水平還是block水平。所以，就顯隱的JavaScript控制上來講，absolute相關方法要比display略勝一籌

注意：控制元素顯示與隱藏才是absolute屬性的正業所在

總結

以上是生活随笔為你收集整理的CSS 相对|绝对(relative/absolute)定位系列（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。