1.相对定位position：relative是相对于默认布局位置定位，也就是相对于你应该在的位置定位。.avatar{顶部：3px；//从上到下偏移3pxleft:7px;//从左到右偏移7pxposition:relative;}相对定位不脱离正常的文档流。对于页面上的其他元素，box2还在原地。2.绝对定位position:absolute.box{position:absolute;top:10px;//相对定位点，从上到下偏移10pxleft:10px;//相对定位点，从左到右偏移10px}绝对定位将一个元素从正常的文档流中取出来，使其对其他元素不可见。绝对定位的元素对于绝对定位的元素也是不可见的。因此，下图中的两个box2重叠，绝对定位的定位对象就是从其父元素中寻找是否有relative/fix/absolute。如果父元素设置了relative/fix/absolute，那么父元素就是绝对定位元素的锚点，如果父元素没有设置relative/fix/absolute，继续查找，直到body和html。如果找不到，就用html根节点作为定位点。所以在使用absolute绝对定位时，最好在父元素上设置相对定位。设置绝对定位后，块级元素的宽度会缩小，宽度由内容决定。行内元素可以设置宽度、高度、内外边距。三、z-indexZ-index详细介绍1、z-index定义：该属性设置元素的堆叠顺序。此属性设置定位元素沿z轴的位置。z轴定义为垂直延伸到显示区域的轴。如果为正，则离用户更近，如果为负，则离用户更远。这意味着具有较高堆叠顺序的元素将始终位于具有较低堆叠顺序的元素之前。注意：元素可以有负的z-index属性值。注意：Z-index仅适用于定位元素（例如position:absolute;）！2.遇到的陷阱：(1)父元素的z-index值较高，不管其子元素的z-index值如何，都可以覆盖z-index值比父元素小的元素。(2)如果z-index的值为auto，则不会形成堆叠上下文。如下去除div3的z-index，将div3的子元素div4和div6直接与div3同级的div1/div2堆叠在一起。demo(3)，如何设置父子关系的z-index，不影响它和盒子的堆叠顺序。但是我发现如果不设置父元素的z-index，那么就将子元素的z-index值设置为负数。父元素将直接覆盖子元素。如下图，box1没有设置z-index，将tooltip的z-index设置为负数，box1覆盖了tooltipdemo链接的链接说明，目前不太满意，后续修复。4.固定定位位置：相对于浏览器窗口的固定定位。所以当发生滚动时，固定定位元素仍然在窗口的固定位置。比如浏览器右侧的返回顶部按钮就是固定定位的。.feedback{右：30px；底部：30px；位置：固定；}
