技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS隱藏元素的10種方法之:使用position屬性

作者:admin    時間:2022-11-2 8:45:1    瀏覽:

在前面文章我們介紹了可以通過使用display隱藏元素,本文將繼續(xù)介紹另一種CSS隱藏元素的方法:使用position。

實例

 CSS隱藏元素的10種方法之:使用position屬性

demodownload

HTML

<ol class="hide" tabindex="0">
  <li>one</li>
  <li class="hide-item">two</li>
  <li>three</li>
</ol>

<p>鼠標(biāo)移到任何一個盒子上隱藏盒子two,<br>使用 <b>position: absolute;</b>。</p>

CSS

/* hide element */
.hide:hover .hide-item,
.hide:focus .hide-item {
  position: absolute;
  left: -999px;
}

/* other styles */
body {
  font-family: sans-serif;
  font-size: 100%;
  color: #222;
  background-color: #fff;
}

p {
  text-align: center;
}

.hide {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hide > * {
  flex: 0 0 25%;
  font-size: 2em;
  text-align: center;
  padding: 1em 0;
  margin: 0.2em;
  background-color: #ccc;
  border-radius: 0.5em;
  user-select: none;
}

.hide-item {
  background-color: #f66;
  cursor: pointer;
}

代碼解釋

position屬性允許使用top、bottomleftright將元素從static頁面布局中的默認(rèn)位置移動。因此,可以將 absolute-positioned 元素移出屏幕,或類似:left: -999px。

度量標(biāo)準(zhǔn) 影響
瀏覽器支持 非常好,除非使用position: sticky
可訪問性 內(nèi)容仍在閱讀
布局受影響? 是的,如果位置改變
渲染要求 看情況
表現(xiàn) 謹(jǐn)慎的話是合理的
動畫幀可能嗎? 是的,在top, bottom, left, 和right
隱藏時可觸發(fā)事件嗎? 是的,但可能無法與屏幕外元素交互

相關(guān)文章

position 屬性

CSS position 屬性用于指定一個元素在文檔中的定位方式。top,right,bottomleft 屬性則決定了該元素的最終位置。

定位類型

  • 定位元素是其計算后位置屬性為 relative, absolute, fixedsticky 的一個元素(換句話說,除static以外的任何東西)。
  • 相對定位元素(relative)是計算后位置屬性為 relative 的元素。
  • 絕對定位元素(absolute)是計算后位置屬性為 absolute 或 fixed 的元素。
  • 粘性定位元素(sticky)是計算后位置屬性為 sticky 的元素。

大多數(shù)情況下,heightwidth 被設(shè)定為 auto 的絕對定位元素,按其內(nèi)容大小調(diào)整尺寸。但是,被絕對定位的元素可以通過指定topbottom ,保留height未指定(即auto),來填充可用的垂直空間。它們同樣可以通過指定leftright并將width 指定為auto來填充可用的水平空間。

語法

position 屬性被指定為從下面的值列表中選擇的單個關(guān)鍵字。

取值

static

該關(guān)鍵字指定元素使用正常的布局行為,即元素在文檔常規(guī)流中當(dāng)前的布局位置。此時 top, right, bottom, leftz-index 屬性無效。

relative

該關(guān)鍵字下,元素先放置在未添加定位時的位置,再在不改變頁面布局的前提下調(diào)整元素位置(因此會在此元素未添加定位時所在位置留下空白)。position:relativetable-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效。

absolute

元素會被移出正常文檔流,并不為元素預(yù)留空間,通過指定元素相對于最近的非 static 定位祖先元素的偏移,來確定元素位置。絕對定位的元素可以設(shè)置外邊距(margins),且不會與其他邊距合并。

fixed

元素會被移出正常文檔流,并不為元素預(yù)留空間,而是通過指定元素相對于屏幕視口(viewport)的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時,元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform, perspectivefilter 屬性非 none 時,容器由視口改為該祖先。

sticky

元素根據(jù)正常文檔流進(jìn)行定位,然后相對它的*最近滾動祖先(nearest scrolling ancestor)*和 containing block (最近塊級祖先 nearest block-level ancestor),包括 table-related 元素,基于top, right, bottom, 和 left的值進(jìn)行偏移。偏移值不會影響任何其他元素的位置。 該值總是創(chuàng)建一個新的層疊上下文(stacking context)。注意,一個 sticky 元素會“固定”在離它最近的一個擁有“滾動機制”的祖先上(當(dāng)該祖先的overflowhidden, scroll, auto, 或 overlay時),即便這個祖先不是最近的真實可滾動祖先。這有效地抑制了任何“sticky”行為。

演示 - position

該演示你能夠?qū)S色盒子控制 position 屬性。

sticky 位置效果,選擇 position: sticky 選項和滾動容器。元素將與其容器一起滾動,直到它位于容器的頂部(或達(dá)到top中指定的偏移量),然后將停止?jié)L動,使其保持可見。

position: sticky;
top: 20px;

 

position: static;

 

position: relative;
top: 40px; left: 40px;

 

position: absolute;
top: 40px; left: 40px;

 

相關(guān)文章

標(biāo)簽: css  CSS隱藏元素  position  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */