大家好，如果您还对全面解析：CSS Position 属性应用技巧总结不太了解，没有关系，今天就由本站为大家分享全面解析：CSS Position 属性应用技巧总结的知识，包括的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
以下是总结~
有遗漏或者错误的地方还请大家指出！ o(^^)o
一、简介
定义：position属性指定元素的定位类型。
说明：该属性定义用于建立元素布局的定位机制。任何元素都可以定位，但绝对定位或固定元素都会生成块级框，无论元素本身的类型如何。相对定位的元素在正常流程中偏离其默认位置。
默认值：静态
继承性：无
形式语法：静态|相对|绝对|粘|固定的
JavaScript语法: object.style.position="绝对"
浏览器支持：所有主流浏览器都支持position属性。然而：任何版本的Internet Explorer（包括IE8）都不支持属性值“inhert”。
二、取值
值说明静态默认值，不定位。元素出现在正常流程中。 （忽略top、right、bottom、left 和z-index 属性）relative 生成一个相对定位的元素，相对于其正常位置定位。 Absolute 生成一个绝对定位的元素，相对于最近的非静态父元素定位。绝对定位的元素可以设置边距，并且不会与其他边距合并。固定生成绝对定位的元素，相对于浏览器窗口（视口）定位。粘性框的位置是根据正常流计算的，然后相当于元素的流根（BFC）和包含块（最近的块级元素）在流中的定位。注：文档流：将表单从上到下分成几行，每行中的元素从左到右排列，这就是文档流。
元素脱离文档流时的情况：浮动、绝对定位（absolute、fixed）。
三、 详解
我们使用初始未定位示例作为参考，与其他属性值进行比较。
【定位参考示例】(https://jsfiddle.net/hysunny/3gwbeu3v/)
position-0.png
1. static
默认值。如果没有定位，元素会出现在正常流程中（顶部、底部、左侧、右侧或z 索引声明将被忽略）
解释：当position设置为static或者没有设置position属性时，元素遵循正常的文档流程，对象占据文档空间。在此定位方法中，top、right、left、bottom 和z-index 属性无效。
示例：【静态定位】(https://jsfiddle.net/hysunny/zj2ogz8m/)
从上面的例子我们可以看出，将position属性设置为static和不设置其实是一样的~
因此，通常不需要设置该属性值，除非要覆盖之前的定义。这是一个例子：
一页
#div-1{
位置：绝对；
}
B页
#div-1{
位置：绝对；
} `位置：静态； B页中的位置定义会覆盖A页中的位置定义。
2. relative
生成相对定位的元素，相对于其正常位置定位。
解释：(1) 当位置设置为相对时，上、右、左、下等属性有效，并相对于其正常位置发生偏移。
（2）当position设置为relative时，元素遵循正常的文档流向，占用文档空间，但占用的文档空间不会随着top、right、left、bottom的偏移而变化。也就是说，其背后的元素不会改变。它是根据前一个元素的正常位置定位的（即在设置top、right、left、bottom 属性之前）。
(3) 当position设置为relative时，如果没有进行top、right、left、bottom的设置，元素的位置不会改变。
示例：[相对定位-1] (https://jsfiddle.net/hysunny/ae8s2cm4/)
position-1.png 虚线是初始位置空间。
从图中我们可以看出，相对定位是相对于元素在文档流中的原始位置的偏移。而其后面第二个元素——是根据虚线位置来定位的，这是该元素在文档流中的原始位置。
好了，我们现在知道top、right、left、bottom等属性不会改变相对定位元素所占用的文档空间。那么margin和padding会改变元素占用的文档空间吗？让我们尝试一下：
在css 代码中添加margin 属性：
示例：[相对定位-2] (https://jsfiddle.net/hysunny/vxc9ctqs/)
position-2.png 从图中可以看出，我们将外边距设置为20px，第二个元素向下偏移40px，所以边距可以改变元素占用的文档空间！同样的，padding也可以改变元素占用的文档空间。这里我就不演示了。
3. absolute
生成一个绝对定位的元素，相对于第一个非静态定位的父元素定位。
解释：当position设置为absolute时，元素将从文档流中分离出来。整个元素不再占用文档空间，并且只能相对于第一个非静态定位的父元素进行定位。
（1）Absolute方式在没有parent且为非静态定位时使用标签作为原点定位，而relative和static模式在使用最外层时使用标签作为原点定位。标签与标签之间的差异约为9px。
(2) 当position设置为absolute或fixed时，至少必须指定left、right、top、bottom属性之一。否则，left、right、top、bottom 属性将使用它们的默认值auto，这将导致对象遵循正常的HTML 布局规则，在前一个对象之后立即呈现。简单来说，它们变得相对，会占用文档空间，不会脱离文档流。如果有多个设置，例如top和bottom同时存在，则只有top生效；如果left 和right 同时存在，则只有left 生效。
(3)绝对定位对象和相对定位对象在可见区域之外都会导致出现滚动条。固定定位对象放置在可见区域之外并且不会出现滚动条。
例子：
[绝对定位-1]（https://jsfiddle.net/hysunny/q325w0k6/）
position-3.png 从这个例子中我们可以发现absolute是相对于html定位的，relative是相对于body定位的。
接下来，我们看一下对绝对定位元素除static 之外的第一个父元素设置margin/padding，看看是否会对文档空间产生影响。
在绝对定位中添加margin/padding属性：
[绝对定位-2]（https://jsfiddle.net/hysunny/59xv1qmx/）
position-4.png 从上图我们可以看出，父元素的margin会偏移子元素的绝对定位，但是padding不会偏移子元素。总结：Absolute是根据父元素的边框来定位的。
4.fixed
生成绝对定位的元素，相对于浏览器窗口定位。
解释：固定定位又称固定定位，与绝对定位相同。它与文档流分离，可以根据上、右、左、下属性进行定位。但不同的是fixed是以窗口为原点的偏移。定位，这意味着它不会根据滚动条的滚动而移动。
示例：【固定定位】(https://jsfiddle.net/hysunny/cubxLga9/)
position-5.png
5. sticky
粘性定位。 CSS3 新属性。它的行为类似于position:relative 和position:fixed 的组合。当目标区域在屏幕中可见时，其行为类似于position:relative；而当页面滚动超出目标区域时，其行为类似于position:fixed，会固定在目标位置。
目前，position: Sticky的浏览器兼容性；还是比较穷的。
示例：【粘性定位】(https://jsfiddle.net/hysunny/rztoc45w/)
6. inherit
指定position属性的值应该从父元素继承。
示例：【继承定位】(https://jsfiddle.net/hysunny/4uLp2ybv/)
当position-6.png运行时，我们发现second继承了first的position属性：fixed。同时，滚动条在可见区域之外时也不会出现。
总结
1. 相对定位的属性：
（1）如果设置了top、right、left、bottom等属性，且父元素没有设置position属性，则元素将以父元素的左上角为定位位置起源。
[示例](https://jsfiddle.net/hysunny/z2L92kqz/)
position-7.png(2) 如果设置了top、right、left、bottom等属性，并且父元素设置了position属性（无论是绝对还是相对），都会使用父元素的左上角作为定位原点。由上、右、左、下决定，但如果父元素有padding属性，则会以内容的左上角为原点进行定位。
[示例](https://jsfiddle.net/hysunny/2jgk2nzv/)
position-8.pngposition-9.png 虚线框为正常原始位置。
虚线框是内容内的区域
我们可以看到元素是以content为原点定位的~
总结以上两点： 相对定位总是以父元素的左上角为原点。如果父元素不存在或者没有position属性或者position属性值为static，则使用浏览器的左上角进行定位。
2. 绝对定位的属性
(1)如果设置了top、right、left、bottom等属性，且父元素没有设置position属性，则元素以浏览器左上角为原点定位，position由top、right、left、bottom 确定。
[示例](https://jsfiddle.net/hysunny/dw2wfh6n/)
position-10.png 从图中可以看到，是相对于浏览器左上角定位的~
（2）如果设置了top、right、left、bottom等属性，并且父元素设置了position属性（无论是绝对还是相对），则以父元素的左上角为原点进行定位，位置由上、右、左、下决定。不过，父元素是否有padding属性对定位原点没有影响。
[示例](https://jsfiddle.net/hysunny/2yL8Lo3k/)
position-11.png 虚线框是正常的原始位置。
虚线框为边框内的区域
我们可以看到，父元素的padding并不会影响子元素的定位。
从以上两点可以得出：
如果要将一个元素放置在其父元素中的绝对位置
必须满足两个条件：
1）设置上、右、左、下至少之一
2）设置父元素的position属性（该值不是静态的）
超过。
总结内容如下：
MDN:位置
css中position属性（absolute|relative|static|fixed）概述及应用
css相对定位和绝对定位详解
【全面解析：CSS Position 属性应用技巧总结】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
这篇文章正好是我最近在学! CSS里的位置属性真是挺重要的
有17位网友表示赞同！
终于有人好好总结了position, 我每次都记混…
有7位网友表示赞同！
需要学习一下，最近在做网页设计
有7位网友表示赞同！
posición... 总是容易搞混的词汇！
有16位网友表示赞同！
做前端工程师必须掌握！
有12位网友表示赞同！
CSS真是个强大的工具！
有20位网友表示赞同！
我一直在尝试用 position 属性来布局元素，希望能学到更深的技巧
有18位网友表示赞同！
学习学习，提升技能!
有7位网友表示赞同！
很有用的知识点，要好好收藏！
有5位网友表示赞同！
位置属性是网页设计中的基石啊！
有12位网友表示赞同！
这篇文章内容很全面，方便理解！
有11位网友表示赞同！
原来position还有这么多种用法… 太棒了！
有15位网友表示赞同！
看完了文章，感觉对CSS有了更深的了解。
有6位网友表示赞同！
希望能看到更多关于CSS的讲解！
有7位网友表示赞同！
分享给同学一起学习!
有8位网友表示赞同！
学习css从这里开始！
有14位网友表示赞同！
希望网站设计越来越丰富有趣！
有5位网友表示赞同！
文章内容很清晰，容易理解！
有15位网友表示赞同！
CSS是网页设计的核心部分，掌握它很重要！
有11位网友表示赞同！
期待后续更多关于CSS的分享！
有17位网友表示赞同！