摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。
一. CSS position 属性介绍
CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed四种取值，默认是static。
二. position: staticstatic：没有定位，元素出现在正常的文档流中，忽略left，right，top，bottom和z-index。
所以对元素position属性设定static时，left属性不起作用，但是元素出现在正常的流中。
三. position: fixedfixed：生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。
窗口滚动不会影响content元素位置，content元素一直在contaniner元素的右下角。
四. position: relativereletive：元素相对其自己正常位置定位，元素在正常的文档流中。
没有设置left和top时的正常位置。
设置了left和top属性，元素位置移动，向右移动50px，向下移动20px。但是元素预留的空间保持正常流动，也就是不会对其他元素产生影响。
五. position: absoluteabsolute：元素绝对定位，相对于static定位以外的第一个父元素，元素脱离文档流。
所以会找到static定位以外的第一个父元素，因为span的父元素content和container都没有设置position属性，默认为static，找到的第一个父元素就为html
，相对于向左移动100px。如果对content或container设置position属性为relative，absolute或fixed，span会相对于content或container来定位。
以下是三个例子，
span元素的第一个position属性不为static的父元素是content，所以相对于content向左移动10px。
当content属性设置为fixed时，span元素相对于content向左移动10px。
span元素第一个position属性不为static的父元素是container，所以相对于container向左移动10px。
六. 总结position: static，元素出现在正常的流中，无法通过left，right，top和bottom设置元素定位。
position: fixed，元素脱离文档流，相对于浏览器窗口定位不变。
position: relative，元素出现在正常的流中，相对于其正常位置定位。
position: absolute，元素脱离文档流，相对于static以外的第一个父元素定位。
理解了position的属性，可以更好的设计页面和实现页面。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113286.html
摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。 一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed...
摘要：相对于其最近的一个定位设置的父对象进行绝对定位，可用。代码基本语法默认值，无特殊定位。代码相对定位相对定位生成相对定位的元素，相对于其它位置进行定位。结语结语带你走进定位详解，多试试，熟能生巧嘛 学习CSS相关知识，定位是其中的重点，也是难点之一，如果不了解css定位有时候都不知道怎么用，下面整理了一下关于定位属性的具体理解和应用方案。 一：定位 定位属性列表 position top...
简述 定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助 position详解 在css中，通过position属性，配合top,right,left,buttom对元素进行定位position属性有：static，relative，absolute，fixed四种，下面分别探讨 默认定位static Document ...
摘要：，这一句是删除的缩进，这样做可以使所有的列表内容都不缩进。中的与样式详解和列表是使用布局页面时常用的元素。这里是列表内容这里是列表内容四属性属性是综合设置样式的属性，也是一个可以继承的属性，语法结构如下各个值的位置可以交换。代码如下: 首页 博客 设计 相册 论坛 关于 CSS: 复制代码 代码如下: #menu ul {list-style:none;margi...
摘要：属性定义了一个元素在页面布局中的位置以及对周围元素的影响。元素将会脱离正常的文档流，所以其周围的元素将会忽略它的存在。此时，我们可以使用等属性对元素进行绝对定位。一般情况下定义两个属性，或或。 postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值： position: absolute position: relative position...
阅读 2608·2021-10-14 09:47
阅读 4875·2021-09-22 15:52
阅读 3331·2019-08-30 15:53
阅读 1402·2019-08-30 15:44
阅读 646·2019-08-29 16:41
阅读 1619·2019-08-29 16:28
阅读 419·2019-08-29 15:23
阅读 1590·2019-08-26 12:20
