2. 程式人生 > >CSS定位屬性之間的相互作用

CSS定位屬性之間的相互作用

阿新 • • 發佈：2019-01-21

1. 引言

原文：bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT 
譯者：愛前端，樂分享的FedFun，前端痴王海慶的部落格。 
譯言：來看下CSS標佈局情況下，定位相關屬性之間的相互作用，意譯為主，不當之處敬請指正。 
閱讀建議5分鐘。

2. 正文

在定位元素時，我們經常用到四個屬性display、position、float和偏移屬性top right bottom left等。但不是在每個元素上都可以同時應用這四個屬性，一些特殊的值組合會覆蓋其他屬性的應用，這些組合有：

  • display: none
  • position: absolute
    或position: fixed
  • float: left或float: right
  • position: static

接下來，我們就一起來研究這些組合之間如何相互作用。

2.1 DISPLAY: NONE

當display設定成none時，其它定位屬性統統失效，因為沒有產生盒模型（the box model）。

<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-class" style="box-sizing: border-box;">.foo</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">display</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> none</span></span>;

  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* None of these apply，以下這些將不會應用 */</span>
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> absolute</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">float</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> left</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">10</span>px</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

2.2 POSITION: ABSOLUTE (OR FIXED)

如果將position屬性設定為absolute或fixed時，將會產生以下作用：

Float

對float屬性設定的任何值都會被覆蓋，float屬性的計算值(the computed value)自動設定為none。

<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-class" style="box-sizing: border-box;">.foo</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> absolute</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">float</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> left</span></span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* 被忽略, 計算值為none */</span>
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

DISPLAY

隨著display屬性值的不同，計算值可能會被覆蓋，如下表所示。

指定值 計算值
inline, inline-block, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption block
inline-table table
其他值 跟指定值相同

下面的程式碼中，.foo和.bar表現上沒有區別。

<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-class" style="box-sizing: border-box;">.foo</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> fixed</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">display</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> inline-block</span></span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* ignored, computed value is block */</span>
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box;">.bar</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> fixed</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">display</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> block</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

2.3 FLOAT: LEFT (OR RIGHT)

除了上面兩種情況，當我們把float屬性設定為left或right時，相互作用如下：

DISPLAY

跟上面絕對定位、固定定位類似，元素浮動後display屬性變換如上表所示。 
下面程式碼中，.foo和.bar的表現效果也一樣。

<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-class" style="box-sizing: border-box;">.foo</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">float</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> left</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">display</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> inline-block</span></span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* ignored, computed value is block */</span>
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box;">.bar</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">float</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> left</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">display</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> block</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

2.4 POSITION: STATIC

除了上面的變化，當position屬性值為static時，相互作用如下：

偏移值

當元素靜態定位時，偏移屬性將失效，如下程式碼所示。

<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-class" style="box-sizing: border-box;">.foo</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> static</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">50</span>px</span></span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* does not apply */</span>
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

相關推薦

CSS定位屬性之間的相互作用

1. 引言 原文：bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT  譯者：愛前端，樂分享的FedFun，前端痴王海慶的部落格。  譯言：來看下CSS標佈局情況下，定位相關屬性之間的相互作用，意譯為主，不當之處敬請指

css 定位屬性position的使用方法實例-----一個層疊窗口

gray 白色 osi style 邊距 需要 屬性 back 分享 運行結果： <!DOCTYPE html> <html> <head> <title>重疊樣式窗口</title> <style

CSS定位屬性-position

聲明 之間 相對定位 sta static 效果 包含 計算 bsp 一、可能的屬性值 1.static:默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 2.absolute：絕對定位。對象脫離

css-定位屬性

一、css定位屬性 1.position屬性 （1）定位方式 absolute(絕對定位)、 fixed(固定） （relative定位參考，可對內部相對absolute定位） z-index: 層疊順序，值越大越在上方。 top: 檢索或設定物件與其最近一個定位的父物件

CSS定位屬性Position詳解

CSS中最常用的佈局類屬性，一個是Float(CSS浮動屬性Float詳解)，另一個就是CSS定位屬性Position。 1. position:static 所有元素的預設定位都是：position:static，這意味著元素沒有被定位，而且在文件中出現在它應該在的位置。 一般來說，不用指定 p

css之定位屬性

color 進行 塊級元素 文檔 定義 adding absolut 表示 頁面 定位標簽：position包含的屬性：relative（相對）與 absolute（絕對）1.position:relative：如果對一個元素進行相對定位，首先它將出現在它所在的位置上。 然

CSS Position 定位屬性

區域 沒有 覆蓋 tar data- 文檔 頁面 輔助 SM 1. 介紹 1.1 說明 Position 屬性：規定元素的定位類型。即元素脫離文檔流的布局，在頁面的任意位置顯示。 1.2 主要的值 ①absolute ：絕對定位；脫離文檔流的布局，遺留下

css position 屬性 定位學習

以下是基於W3cschool的內容（http://www.w3school.com.cn/），部分轉自網路。 可能有點亂。 CSS position 屬性 這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼

CSS定位與CSS屬性選擇器

從上週的周任務來看，自己的CSS還是學習的不夠紮實，所以本週的主要任務是學習CSS定位和CSS屬性選擇器。CSS 有三種基本的定位機制：普通流、浮動和絕對定位。一般如果不給元指定特定的地方，元素一般會按照普通流來排列,如果設定了特定的地方則按照下面說法排列。 1.絕對定位

CSS定位（position屬性）以及top和magin-top的區別

CSS 定位 (Positioning) 屬性允許我們對元素進行定位。 CSS 定位和浮動：CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。 定位的基本思想很簡單，它允許我

CSS定位以及z-index屬性（層疊性）的詳解

定位 定位方向：top left right bottom就這四個位置 一、靜態定位 position：static; 靜態定位就是文件流，沒有別的意思，不需要寫 二、絕對定位 （脫標） position：absolute;

CSS position 屬性 絕對定位與相對定位，以及浮動

                以前一直很模糊定位原理，以為absolute與relative必須配合使用，使用absolute必

CSS position 屬性：絕對定位與相對定位，以及浮動

以前一直很模糊定位原理，以為absolute與relative必須配合使用，使用absolute必須父標籤必須設定為relative。 可能的值：absolute，fixed，relative，s

CSS定位（positive）屬性的原理

static 預設值，元素出現在正常的流中。預設值，所以沒什麼好說的。 relative 通過設定水平距離（left/right）或垂直距離（top/bottom），讓這個元素相對於它的起點移動。元素仍然佔據原來的空間。所以當div2偏移100px

CSS 詳細解讀定位屬性 position 以及引數

Css 詳細解讀定位屬性 position 以及引數position 定位屬性，是CSS中非常重要的屬性。除了文件流佈局，就是定位佈局了。本來我對這個問題沒有放在心上，畢竟寫了這麼多年的css，對position的各類使用是爛熟於心的。但是今天突然發現，居然很多人都不清楚po

[CSS]使用絕對定位屬性來實現CSS內部子容器高度隨著外部父容器高度變化而變化

測試demo 原始碼：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"

jQuery原始碼解析（4）—— css樣式、定位屬性

閒話 原計劃是沒有這篇博文的，研究animation原始碼的時候遇到了css樣式這個攔路虎。比如jQuery支援“+=10”、“+=10px”定義一個屬性的增量，但是有的屬性設定時可以支援數字，有的必須有單位；在對屬性當前值讀取時，不同的瀏覽器可能返回不同的單

project.json 和 csproj 屬性之間的映射

ont some form ati put git ast property using 作者 Nate McMaster .NET Core 工具的開發過程中實施了一項重要的設計更改，即不再支持 project.json 文件，而是將 .NET Core 項目轉移

CSS Display屬性與盒模型

鏈接 依據 使用 dem align ont 情況 rac rgb 由於HTML流式文檔的特性，頁面布局往往是新手最為頭疼的問題之中的一個。 每一個HTML元素都會渲染為一個Box，可分為inline Box和block Box。 依據display屬性的不同。Box

淺談CSS浮動屬性

情況 了解 特性 影響 並排 添加 float 下標 左右 要介紹css的float浮動屬性，就必須先了解一下標準文檔流 標準文檔流： 在沒有css的幹預下，塊級元素獨占一行，可以設置寬高，行內元素並排顯示，寬高自動填充。 HTML頁面的標準文檔流(默認布局)是：從