1. 因?yàn)槭孪葮?biāo)準(zhǔn)就已經(jīng)在文字的后面顯示，設(shè)置absolute之后因?yàn)楦S性仍然是在原來(lái)的文字，然后再設(shè)置margin實(shí)現(xiàn)定位即可

2. absolute正業(yè)之元素隱藏

元素隱藏與顯示是我們?cè)陧?yè)面制作與交互效果實(shí)現(xiàn)中非常常見(jiàn)的，如果您只是使用display:none與display:block/inline來(lái)實(shí)現(xiàn)DOM元素的顯隱控制，那你就out了。就元素的顯示與隱藏實(shí)現(xiàn)，使用display在有些時(shí)候算是比較糟糕的方法了

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

使用absolute屬性控制DOM元素的顯隱有三個(gè)關(guān)鍵點(diǎn)：頁(yè)面可用性，回流與渲染，配合JavaScript的控制

2.1 可用性隱藏

所謂可用性隱藏，就是兼顧屏幕閱讀器這類互聯(lián)網(wǎng)閱讀輔助設(shè)備的隱藏方式。Yahoo! 可用性實(shí)驗(yàn)室成員Ted Drake就不同隱藏方法下屏幕閱讀器的可用性問(wèn)題作為測(cè)試，結(jié)果發(fā)現(xiàn)下面兩種隱藏方式屏幕閱讀器是讀不了的

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

例如優(yōu)酷網(wǎng)電影或視頻的簡(jiǎn)介中“顯示詳情”的實(shí)現(xiàn)就是使用的display:none，如下截圖

而大眾點(diǎn)評(píng)網(wǎng)的隱藏層多采用position:absolute + visibility:hidden的方法，如下截圖

上述隱藏內(nèi)容其實(shí)都是有用的信息，對(duì)于像盲人這類需要借助屏幕閱讀器的用戶無(wú)法知道這些信息了。拿優(yōu)酷的那個(gè)例子，盲人用戶就無(wú)法知道影片完整的簡(jiǎn)介

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

2.2 配合JavaScript的控制

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

要讓元素隱藏，很簡(jiǎn)單，直接：

但是，如果要顯示隱藏的元素，咋辦呢？因?yàn)椴煌臉?biāo)簽所處的display水平是不一樣的，于是，我們很難有一個(gè)簡(jiǎn)單的統(tǒng)一的顯示方法。例如，下面的代碼可能使用于div, p標(biāo)簽，但是對(duì)于span等inline水平的元素，可能就會(huì)嗝屁了（原本單行顯示結(jié)果換行）

而使用絕對(duì)定位實(shí)現(xiàn)的一些元素隱藏方法的控制就相對(duì)簡(jiǎn)單很多的。例如：position:absolute + visibility:hidden方法，當(dāng)我們要讓元素（原本非絕對(duì)定位元素）顯示的時(shí)候，我們需要設(shè)置

而類似的position:absolute + top:-999em方法，當(dāng)我們要讓元素（原本非絕對(duì)定位元素）顯示的時(shí)候，我們只需要設(shè)置

而無(wú)需擔(dān)心原本標(biāo)簽的是inline水平還是block水平。所以，就顯隱的JavaScript控制上來(lái)講，absolute相關(guān)方法要比display略勝一籌

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。