天坑，CSS之定位Position（六分之五）

xuweijian 发布于2019-08-30 15:54 / 794人阅读

摘要：下文称位置属性即为。注意，不会脱离文档流，具体见下面的图示。直译为修正，简单粗暴，直接相对浏览器窗口显示区域定位。

Position定位

个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute，当年可是被虐的不轻。当然了，现在爱上了这个属性，谁用谁知道。

position属性

position是CSS的一个属性，地位较高，也是我们重点要说的一个属性。

对应了四个与之相关的位置属性，top、right、bottom、left，分别是指离上、右、下、左的距离，注意是设定后移动自身，不是挤走别的元素。

下文称位置属性即为top、right、bottom、left。

如果一个页面，不通过position的调整，在如今看来，将是极度难以忍受的。其主要包含下列属性值，不含继承的话，共有5个，以下一一例举：

static

直译为静态，默认值，在其上使用position的位置属性无效。

relative

直译为相对，与static近似，但在其上使用position的位置属性有效。

注意，relative不会脱离文档流，具体见下面的图示。

absolute

直译为绝对，向上寻找 第一个非static定位的标签，然后位置属性相对其有效。如果没有找到，则相对document。

向上寻找：标签存在父子级关系，由子级向父级乃至祖宗级直到body为止。向下则相反。
absolute会脱离文档流。

fixed

直译为修正，简单粗暴，直接相对浏览器窗口显示区域定位。

fixed会脱离文档流。

sticky

直译为粘性，当相应内容显示在视觉范围内，则表现为relative定位，当内容即将逃出显示区域时，切换为fixed定位。

sticky不会脱离文档流，即使换成了fixed。

以下针对5种定位做出图文描述

static

static设置位置属性是无效的

static为了方便理解还是与relative对比可以看出效果

relative

relative设置位置属性有效，并且没有脱离原本文档流，只是显示位置变化了而已

absolute

此图是证明相对于document

absolute的最大难点就是具体相对谁的定位：

absolute相对的是向上第一个不是static默认定位的元素，如果没有找到，则相对于document

此图是证明相对于非static的父级标签，也可以自己试试，父级标签都是默认会如何。

fixed

相对于浏览器窗口显示内容定位

如果对fixed元素的父级元素设置了transform，则回导致fixed失效，这里有个印象就好。

sticky

处在显示区域中是使用relative，当要逃出显示区域时切换为fixed

新出的，兼容性注意下就好，非常适合做一下标题模块。

以上就是position相关的速讲知识，有疑问或者其他可以留言询问。

如果文章对你有一点帮助，我就非常的开心了。
喜欢我的文章，请关注我，定期发布技术文章，满满的干货。

源码相关

CodePen

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

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

天坑，CSS之定位Position（六分之五）

摘要：下文称位置属性即为。注意，不会脱离文档流，具体见下面的图示。直译为修正，简单粗暴，直接相对浏览器窗口显示区域定位。 Position定位个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute，当年可是被虐的不轻。当然了，现在爱上了这个属性，谁用谁知道。 position属性 position是CSS的一个属性，地位较高，也是我们重点要说的一个属性。对应了四...

anRui 2019-08-02 10:56 评论0 收藏0
CSS入门之引用、选择器、属性（六分之三）

摘要：入门教程六分之三篇没办法，我直播教小伙伴入门，属性讲完，准备说定位的时候，他们就喊停，不住了。。。选择器表达式如下相关效果见表达式关键词特性属性属性即样式定制的具体样式，比如定制宽高，分别为与等。 CSS 入门教程六分之三篇没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333 要点解释引用如...

baishancloud 2019-08-30 15:54 评论0 收藏0
CSS入门之盒模型（六分之四）

摘要：盒模型要点知识务必注意看，这可是前端面试必定会遇到的问题。盒模型的主要属性，除继承外有两个值这里不再细说历史原因，只说其作用。严格来说与标签大小无关，但是影响视觉上的位置。具象化需调试指出，如下其中的最外圈的黄色区域就是了。盒模型要点知识务必注意看，这可是前端面试必定会遇到的问题。 box-sizing 盒模型的主要CSS属性，除继承外有两个值： content-box...

yearsj 2019-08-02 10:54 评论0 收藏0