定位

定位

CSS 定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
css定位属性共有三种：
相对定位 relative

 position: relative;

绝对定位 absolute

 position: absolute;

固定定位 fixed

 position: foxed;

补充：粘性定位 stick 在屏幕中按照常规流排版，当卷动到屏幕外时则表现如fixed。该属性是现实中你见到的吸附效果。

 position: sticky;

相对定位：
相对与自己原来的位置定位，进行位置的调整。

margin与相对定位调整位置的区别：
1.盒子和盒子的距离，间隙。相对定位：位置的调整
2.margin会影响后面的元素。相对定位不会影响别人。

不脱标。坑位还占着，别人挤不走。

做绝对定位的参考，子绝父相。

   position: relative;
      left: 400px;
      /* right: 200px; */
      top: 200px;
      /* bottom:200px; */

绝对定位
找一个参考系，定义横纵坐标。默认是在父容器或者浏览器的左上角或左下角。横坐标用left，right 纵坐标用top和botto
绝对定位会脱标。

浏览器窗口高600px，页面已经卷了200px，现在有一个div：
wid：100
hei：100px
bc red;
post ab;
left:200px;
bottom:200px

以盒子为参考点：
一个绝对定位的元素，如果祖先元素中出现了已定位的元素，那么将以该元素为参考点。
1.以最近的已经定位的祖先元素，不一定是父容器，也可以是爷爷。
2.不一定是相对对位，任何定位信息，都可以做子容器的参考点。
3.使用最多的子绝父相。
4.以父容器的border内侧点为参考点，进行定位。

应用：
1.压盖效果，一个div压在另一个div上面。
2.绝对定位的盒子居中。 left:50%;margin-left: -自身宽度的一半;

固定定位：
相对浏览器进行定位，无论页面怎么滚动， 这个盒子显示的位置不变。
用途：
1.网页返回顶部，侧边广告。
2.顶部固定导航条

   position: fixed;
      top: 0;
      left: 0;

z-index 属性：
z-index 属性 是定位元素专用的。 属性值是数字，数值大的会压盖住数值小的

1. z-index都没有值或值相同的时候，写在后面的盒子会盖住前面的盒子。
   2.数值大的会盖住数值小的，z-index是一个自然数，默认为0.
   3.从父现象：大家都有z-index的值的时候，会比较父容器的z-index，如果父1比父2大，就算儿子2比儿子1大，儿子1也能压住儿子2。