CSS定位模式

最新推荐文章于 2023-07-26 08:43:28 发布

danYoo

最新推荐文章于 2023-07-26 08:43:28 发布

阅读量538

点赞数

分类专栏： Web前端文章标签：布局 css 前端

本文链接：https://blog.csdn.net/u013230804/article/details/39735277

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前两天在面试美团前端职位的时候，被面试官问到了CSS中的定位，才发现自己对其只是简单的了解，深入一点就被卡住了，所以今天反思一下，总结CSS中的一些定位知识。

文档流

CSS的定位机制有3种：普通流、浮动和定位。

普通流就是正常的文档流，没有用css样式去控制的html文档结构，你写的界面的顺序就是网页展示的顺序（将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流)。

每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动

相对定位, 即相对于元素在文档流中位置进行偏移. 但保留原占位。所以position:relative是很好的创建定位祖先元素的方法.,因为它不会离开常规流。使用这种方法，能够创建出既保持常规流又实现绝对定位的布局。相对定位自己通过定位跑开了还占用着原来的位置

绝对定位, 即完全脱离文档流, 使元素相对于常规流的位置或最近定位祖先元素的位置偏移一定聚距离，即如果某一元素设置为定位元素后，那么它就成为了最近的绝对定位后代元素的定位参考点。如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象会让出自己原先占用位置.

静态定位, 取消元素的定位设置，使之恢复为原先在常规流中的显示方式。static是position的默认值

固定定位, 即完全脱离文档流，使元素相对于视口偏移一定的距离。

堆叠顺序

CSS使用z-index控制元素的堆叠顺序。Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。静态定位元素安装文档出现顺序从后往前进行堆叠的。设定位置元素则忽略文档出现顺序，根据z-index值由小到大的顺序从后往前堆叠。设置为负值z-index的设定位置元素位于静态定位元素和非设定位置浮动元素之下。z-index值不必是连续的，其默认值是auto.

绝对定位和相对定位

绝对定位position:absolute,可以将任何元素渲染为绝对框。使用width和height，可以设置它的尺寸。百分数是相对于最近定位祖先元素的尺寸而言，而非父元素的尺寸。将元素的left,right,top和bottom设置为特定值，可以使它对齐到最近定位祖先元素的各边。或者，将元素的left,right,top和bottom设置为auto，可以使它恢复原先在常规流中的位置。在祖先元素中设置position:relative、position:absolute、position:fixed，可以使之变成设定位置的元素。如果不存在定位祖先元素，浏览器会将<body>作为最近定位祖先元素。绝对定位的位置不受其他元素和内容的影响，也不会影响其他元素和内容的位置。因此他们可能会重叠。

相对定位position:relative,将元素设置为相对定位，就可以控制元素在常规流中的堆叠顺序。使用z-index,可以设置元素相对于其他设定位置元素的堆叠顺序。相对定位元素不会离开常规流，也不会改变它在常规流中形状。例如，·如果一个行内元素包含多行内容（换行），那么设置为相对定位之后，它仍然保留其特殊布局。与之相反，绝对定位则会将行内元素变成绝对框，并在绝对块级框中重新排列内容，而这可能会改变它的布局。