开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第23天，点击查看活动详情

元素的定位

元素定位说明：网页中各种元素都必须有自己合理的位置，从而搭建出整个页面的结构。

面试题：这些定位的区别：

解答两方面：

1、主要是相对的定位对象不同

2、是否脱离文档流

Position定位

需要精准的位置，必须要知道标记的精准坐标用该属性

说明：该属性规定应用于元素的定位方法的类型

属性值：

static 默认值，静态的，所有的而元素都不定位

---

relative  相对定位

说明：相对于元素本身原来的位置定位的。

不脱离文档流，不对其他元素造成影响。

自己本身的位置保留，别人上不去，它依然支撑父元素

  

---

 

absolute 绝对定位

设置了该属性，也会脱离文档流

说明：绝对定位是相对于离他最近的那个设置了定位的祖先元素进行定位的。如果祖先元素中都没有设置定位，那他相对于body定位

给子元素设置绝对定位，父元素就要设置相对定位，不然整个网页内容就会乱掉。

绝对定位脱离文档流之后对下一个元素的影响

自己本身：自己设置绝对定位，会脱离文档流

兄弟关系：

1、      上一个元素设置绝对定位，下面的元素也会占据上面元素的位置，下面元素内容会被覆盖住

2、      下面的设置绝对定位，对上面没影响。

3、      两个都设置定位，下面的元素会遮盖住上面的内容。两个都脱离文档流。

父子关系：

1、      子元素设置绝对定位，子元素脱离文档流，父元素塌

2、      父元素设置绝对定位，带着子元素一起脱离文档流，宽高由内容支撑，有两个子元素，两个子元素之间不会水平排列，按原来排列顺序，宽变为内容的宽

3、父子都设置绝对定位，各自脱离文档流，子元素会变成一个字符或一个单词的宽

---

Fixed    固定定位

说明：相对于浏览器的视口定位的  会脱离文档流

不会随着滚动条的滚动而挪动位置

设置该属性之后元素会先隐藏，再给他设置一个top、left、right、bottom就可以出现

---

Sticky粘性定位

说明：加了该属性的元素，不滚动

是根据用户的滚动位置进行定位

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换，起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置。样式里还要加top、bottom、left、right属性定位

 

Position：sticky的元素根据用户的滚动条位置进行设置。

-Webkit-叫做私有属性 是saifair浏览器的内核

position:sticky;

position:-webkiy-stickiy

元素其实是使用top、bottom、left、right属性定位的

设置了sticky的元素的父元素，要有overflow：scroll属性。

---

z-index

z-index必须和position一起使用。

说明：主要用来调整谁覆盖谁

给哪个设置了位置的元素加z-index：数值   ，哪个元素会在上面   两个设置了定位的元素，都加了z-index，哪个数值大，哪个在上面