html-->css--->定位

一、为什么是要使用定位：

　　　　意义：1.首先使用定位，可以建立列式布局，将布局的一部分与另一部分重叠。

还可以完成多年来通常需要使用多个表格才能完成的任务。

　　　　　　　2.它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

二、定位分五种定位：

　　　　相对定位  绝对定位   固定定位 是最常用的三种

　　　　static  、sticky 。

2.1、相对定位  

　　　　格式： position:relative;

　　　　定位参照物：参照于自身在页面中所在的位置进行定位

　　　　特点：会提升元素的层级；不会使元素脱离文档流，也不会改变元素的性质（即行内元素依旧是行内元素）；必须通过设置元素的偏移量来改变元素的位置。

　　　　注意： 还是会遵循字节流格式，可以进行独立使用，

2.2、偏移量:(offset)

　　　　偏移量用来设置开启了定位的元素在页面中的位置，偏移量的设置不会影响其他元素的位置

　　　　偏移量的四个可设置值：

　　　　　　top:定位元素到定位位置上面的距离。

　　　　　　left:定位元素到定位位置左侧的距离。

　　　　　　right:定位元素到定位位置右侧的距离。

　　　　　　bottom：定位元素到定位位置下面的距离。

2.3、绝对定位：

　　　　　　格式： position:absolute;

　　　　　　定位参照物：离它最近且已开启定位的父级或者祖先及快元素，如果他的父级或者祖先级都没有开启定位的话，那么body或者html 这些视窗大小来作为定位参照物。

　　　　　　特点：会提升元素的层级；元素会脱离文档流；元素的性质会被改变（行内元素–>块元素，且块元素的高度默认是被内容撑开）；必须通过设置元素的偏移量来改变元素的位置。

2.4、固定定位：

　　　　　　格式： position:fixed;

　　　　　　定位参照物：浏览器的视口  ，定位基点是浏览器窗口

　　　　　　特点： 元素的位置不会随滚动条的滚动而改变 ,改变字符流。

　　　　　　这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

常用三种定位结论： 1.相对定位和固定定位相结合使用，相对定位和绝对定位都可以进行独立使用。

　　　　　　　　　　2、相对定位和固定定位相互使用，就可以实现动态效果

2.5、static是position 默认值

　　　　如果省略（就是不写）position的话 就相当于正常的子节流，就相当于没有定位，定位位置 是浏览器自行决定， 四个属性无效

2.6、sticky就相当于  相对定位与固定定位相互结合