刻意寻找的东西，往往找不到。世间万物来来去去，都有其时。简单通用定位：将盒子设置在某个位置，自由浮动在其他盒子之上（包括标准流和浮动）。所以可以呈现三种布局机制：标准流在底部，浮动框在中间层，定位框在顶部。在盒子的中间层，定位盒子的顶层。定位详细语法：positioning=定位模式+sideoffsetsideoffset在CSS中，通过top,bottom,left,right属性定义元素的边缘偏移，简单的就是上，下，左四个方向的名词，对吧？sideoffset属性示例说明toptop：80px顶部偏移量，定义元素相对于其父元素上边缘的距离。bottombottom：80px底部偏移量，定义元素相对于其父元素底线的距离。leftleft：80px的左偏移量，定义了元素相对于其父元素左线的距离。rightright：80px的右偏移量，定义了元素相对于其父元素右线的距离。只有定位框的侧偏移量才有价值。一般来说，有定位的地方，就一定有边缘偏移。定位方式在CSS中，通过position属性定义元素的定位方式，是定位的分类。掌握选择器{位置：属性值；}定位模式有不同的分类。在不同的情况下，我们采用不同的定位方式。值语义static静态定位（默认）relative相对定位absolute绝对定位fixed定位relative定位（relative）很重要相对定位是元素在标准流程中相对于其原始位置移动。相对定位的特点：相对于他原来在标准流中的位置来移动。被定位的盒子在标准流程中继续占据区域，后面的盒子仍然在标准流程中对其进行处理。绝对定位（absolute）很重要。绝对定位是元素随定位的父元素一起移动的绝对定位的特点：它们根本不占据任何位置。根据最近定位（绝对、固定或相对定位）的父元素定位。如果父元素没有定位，将使用浏览器作为标准的点击定位来定位。如下图所示，当父元素没有定位时，给子元素设置一个绝对定位，子框会根据文档即浏览器定位。注意，这里的父元素不仅仅指子元素的上层父元素，还包括逐层查找元素。如果父元素的上层有定位，则根据祖父元素定位。总结一下：根据最近的定位（绝对、固定或相对）父元素定位元素。固定定位（fixed）很重要。固定定位是绝对定位的一种特殊形式。固定定位的特点：完全不占位置，只识别浏览器可见窗口，与父元素无关，不随滚动条滚动。绝对定位框居中。绝对定位的框不能水平居中，margin:0auto。这是一个简单的计算公式，可以使绝对定位的盒子水平居中。我们首先将框向左移动50%。这时候我们会发现移动的位置太多了，多出的长度和箱子一样。然后我们需要减去盒子的一半长度，可以将margin-left设置为负数，负数的值等于盒子宽度的一半。我们可以实践一下：给父元素盒子设置一个position:relative，给需要居中的盒子设置绝对定位，left等于50%，margin-left等于盒子宽度的一半。绝对定位框hin的纵横居中重要吗？以上主要是对绝对定位水平居中的详解。接下来通过一张图，对绝对定位的纵横居中和其他位置的居中进行详解：我们先来看这张图，整个黑边是一个长800px，高为一个大方框400像素。示例框的宽度为200像素，高度为100像素。上下框水平居中，左右框垂直居中，符合水平居中的原则。重要的一点来了。我们通常使用的垂直和水平居中。给盒子设置绝对定位后，设置：left:50%,top:50%。这时候你会发现盒子从中间位置向右偏移了宽度的一半多，高度向下偏移了一半，所以需要减去。给框留边距：-50px-100px；具体代码示例如下？：当在定位布局中使用堆叠顺序时，盒子可能会出现重叠的情况。对于加了定位的盒子，默认是后来者在前，后面的盒子会压倒前面的。可以通过应用z-index堆叠级别属性来调整框的堆叠顺序。如下图所示：z-index的特点如下：属性值：正整数、负整数或0，默认值为0，值越大，框越高；以后不能添加单位。注意：z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位均无效。定位到更改display属性之前的文章：CSS基础知识更改显示方式有几种方式：使用display:inline-block转换为内联块元素默认使用floatingfloat转换为内联块元素，然后元素内容的宽度就是盒子的宽度，类似的，还有一个我们在后面的绝对定位和固定定位中会涉及到的，也会默认转化为内联块元素。很多定位框需要单独写宽度。这里有一个小细节，比如我们需要给一个导航如果给bar设置了固定定位，那么我们知道固定定位是不占空间的，所以下面标准流程的内容都会被固定覆盖导航栏，看不到正常文档流的内容。这个时候我们只需要设置正常的单据流即可。margin-top就够了，值等于导航栏的高度。定位和折叠（折叠解决方案）我们之前提到过，在父元素内部为子元素设置外边距值时，父元素也可能发生变化，即外边距合并通常所说的折叠，但是绝对定位andfloatingwillnottriggermarginmerging?:什么是崩盘，为什么会崩盘？只会折叠父子元素吗？下面将详细解释。掌握和理解非常重要。只有当你明白了原因，自然会提醒他他的解决办法。原因：在标准文档流中，垂直方向的边距会重叠（水平方向不会塌陷），两个边距紧挨着，中间没有border或padding。当两个边距直接接触时，就会发生合并。即合并外边距，较大的边距会覆盖较小的边距。两个竖框之间只有一个较大的margin，就是margincollapse的现象。出现折叠的对象父子关系盒子折叠的解决方法父子关系盒子折叠的解决方法这里有七种解决方法。您需要根据项目的要求选择合适的解决方案。是轮播图的定位结构，还没有实现相应的功能。是这篇文章的综合应用
