卡卡網(wǎng)

在前面文章我們介紹了可以通過使用display隱藏元素，本文將繼續(xù)介紹另一種CSS隱藏元素的方法：使用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、bottom、left和right將元素從static頁面布局中的默認(rèn)位置移動。因此，可以將 absolute-positioned 元素移出屏幕，或類似：left: -999px。

相關(guān)文章

• CSS隱藏元素的10種方法之：縮小尺寸
• CSS隱藏元素的10種方法之：使用::after偽元素
• CSS隱藏元素的10種方法之：使用position屬性
• CSS隱藏元素的10種方法之：使用display
• CSS隱藏元素的10種方法之：使用visibility
• CSS隱藏元素的10種方法之：使用clip-path
• CSS隱藏元素的10種方法之：使用transform
• CSS隱藏元素的10種方法之：color Alpha 透明度
• CSS隱藏元素的10種方法之：opacity和filter: opacity()

position 屬性

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

定位類型

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

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

語法

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

取值

static

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

relative

該關(guān)鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-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, perspective 或 filter 屬性非 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)該祖先的overflow 是 hidden, 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)文章

• CSS Grid 和 CSS Flexbox 的區(qū)別
• CSS+JS實現(xiàn)的顏色漸變可拖動滑塊
• 詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動畫
• 三種在CSS中排除(不選擇)第一個子標(biāo)簽的方法
• [實例]純 CSS SVG 畫圓/圓環(huán)/圓弧動畫
• [示例]如何使用CSS將文本環(huán)繞在圖像周圍
• [3示例]如何用CSS實現(xiàn)文本環(huán)繞圖像
• 純CSS實現(xiàn)水平(橫向)滾動列表
• CSS如何創(chuàng)建淡入背景動畫
• 如何為圖像、按鈕和文本在懸停時添加淡入過渡效果

標(biāo)簽: css  CSS隱藏元素  position