详解 CSS 属性 - position

CastlePeaK 发布于2019-08-01 14:36 / 1628人阅读

摘要：属性定义了一个元素在页面布局中的位置以及对周围元素的影响。元素将会脱离正常的文档流，所以其周围的元素将会忽略它的存在。此时，我们可以使用等属性对元素进行绝对定位。一般情况下定义两个属性，或或。

postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值：

position: absolute

position: relative

position: fixed

position: static

position: inherit

本文主要详细讨论 position 属性的前三个值，首先大概讲解下后两个值：

static

static 为 position 属性的默认值，static 元素会遵循正常的文档流，且会忽略 top,bottom,left,right 等属性。

inherit

inherit 值如同其他 css 属性的 inherit 值，即继承父元素的 position 值。

absolute

absolute 元素将会脱离正常的文档流，所以其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时，我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或 bottom,left 或 right。
这个绝对定位需要稍微理解下，因为这里容易与 relative 产生混淆。
例如，当对 absolute 元素添加 left:10px 定位后，这个 left 究竟是对哪个元素而言呢？其实，此时将会往上查找 absolute 元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么这个 left:10px 就是根据该父元素进行的定位，否则将会继续查找该父元素的父元素，一直追溯到某个父元素具备不为 static 的 position 值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。

Im an absolute element
Im a default element

//直接忽略 absolute 元素的存在

relative

relative 元素遵循正常的文档流，所以周围元素不会忽略它的存在，relative 元素同样支持 top,bottom,left,right 等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果，但是区别在于， relative 元素周围的元素将会忽略 relative 元素的移动。我们注意，当 relative 元素未使用定位属性进行相对定位时，它不会被周围的元素忽略，但利用定位属性进行定位后，周围的元素会忽略 relative 元素的移动，它们会认为 relative 元素仍然在原来的位置，并未进行移动，我们用个例子来说明：

Im a relative element
Im a default element

//并未忽略 relative 元素的存在

Im a relative element
Im a default element

//忽略了 relative 元素的移动

fixed

fixed 元素将会脱离正常的文档流，所以它与 absolute 元素很相似，同样会被周围元素忽略，支持 top,bottom,left,right 属性，但两者仍有很大不同。
首先，fixed 元素定位与它的父元素无任何关系，它永远是相对最外层的 window 进行定位的。
第二，fixed 元素正如它的名字一样，它是固定在屏幕的某个位置，它不会因为屏幕的滚动而消失。


  Im an absolute element
  Im a fixed element
  Im a default element

//如同 absolute，fixed元素也被周围元素忽略

因为外层 div 高度超过一屏，所以现在我们往下滚动屏幕。

//只有 fixed 元素未因为屏幕滚动而消失，因为它是“固定”的

z-index

为什么要在这里提到 z-index 属性呢？那是因为 z-index 属性只对定位元素有效，即 position 值为 absolute,relative,fixed 时才有效。我们首先了解下什么叫 z-index。

从上图我们不难发现 z-index 值代表的是元素的堆叠顺序，值越高则显示顺序越优先。

Im an absolute element
Im a fixed element

//fixed 元素 z-index 比 absoulute 元素高，所以显示在前面

（我把背景色调为非透明，这样可以看得更清楚），假如 z-index 值相同会出现什么情况呢？

Im an absolute element
Im a fixed element

//z-index 值相同，仍然显示为 fixed 元素

所以我们知道，当 z-index 值相同时，后加载的元素显示优先。

参考

http://www.vanseodesign.com/css/css-positioning/

云服务器 GPU云服务器 position属性，css position详解 position，css 属性详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49475.html

[CSS]CSS Position 详解

摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed...

xiguadada 2019-08-29 15:23 评论0 收藏0
[CSS]CSS Position 详解

摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed...

alexnevsky 2019-08-02 10:26 评论0 收藏0
带你走进CSS定位详解

摘要：相对于其最近的一个定位设置的父对象进行绝对定位，可用。代码基本语法默认值，无特殊定位。代码相对定位相对定位生成相对定位的元素，相对于其它位置进行定位。结语结语带你走进定位详解，多试试，熟能生巧嘛学习CSS相关知识，定位是其中的重点，也是难点之一，如果不了解css定位有时候都不知道怎么用，下面整理了一下关于定位属性的具体理解和应用方案。一：定位定位属性列表 position top...

googollee 2019-04-23 13:29 评论0 收藏0
css定位案例探讨（position属性详解）

简述定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助 position详解在css中，通过position属性，配合top,right,left,buttom对元素进行定位position属性有：static，relative，absolute，fixed四种，下面分别探讨默认定位static Document ...

Half 2019-08-28 18:22 评论0 收藏0
css控制UL LI 的样式详解(推荐)

摘要：，这一句是删除的缩进，这样做可以使所有的列表内容都不缩进。中的与样式详解和列表是使用布局页面时常用的元素。这里是列表内容这里是列表内容四属性属性是综合设置样式的属性，也是一个可以继承的属性，语法结构如下各个值的位置可以交换。代码如下: 首页博客设计相册论坛关于 CSS: 复制代码代码如下: #menu ul {list-style:none;margi...

happyhuangjinjin 2019-04-23 11:43 评论0 收藏0
详解 CSS 属性 - position

摘要：属性定义了一个元素在页面布局中的位置以及对周围元素的影响。元素将会脱离正常的文档流，所以其周围的元素将会忽略它的存在。此时，我们可以使用等属性对元素进行绝对定位。一般情况下定义两个属性，或或。 postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值： position: absolute position: relative position...

joywek 2019-08-28 17:51 评论0 收藏0