卡卡網(wǎng)

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

實(shí)例

demodownload

HTML

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

<p>鼠標(biāo)移到任何一個(gè)盒子上隱藏盒子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頁(yè)面布局中的默認(rèn)位置移動(dòng)。因此，可以將 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 屬性用于指定一個(gè)元素在文檔中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。

定位類型

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

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

語(yǔ)法

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

取值

static

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

relative

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

absolute

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

fixed

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

sticky

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

演示 - position

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

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

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

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