DIV CSS绝对定位教程
经常使用图层的绝对定位。 例如，如果我们希望图层位于图层内的特定位置，我们可以使用 : 和 : 来实现此目的。
1. 语法和结构-
语法：
:
范围：
：无特殊定位，对象遵循HTML定位规则
：将对象拖出文档流，使用左、右、上等属性进行绝对定位。 它的级联是通过 css z-index 属性定义的。该对象现在没有边距，但仍然有内边距和边框
：对象不能堆叠，但会根据左、右、上等属性在正常文档流中偏移。
阐明：
设置对象的定位方式可以使布局图层易于绝对定位，更准确地控制盒子对象。
2. 实际使用-
绝对定位用于定位盒子对象。 有时一个布局中有几个小对象，很难使用css或css进行相对定位。 这种情况下，我们可以使用绝对定位来轻松做到。 尤其是对于一个盒子里几个小盒子的不规则布局，这时候我们使用绝对定位来布局对象就非常方便了。
绝对定位演示适用于图片和不规则布局，因此可以使用:;:进行绝对定位
绝对定位和浮动不能同时使用。 比如一个大盒子，有的采用绝对定位，有的采用css float浮动定位。 这样，IE6浏览器就不会在大对象中显示这些绝对定位和相对定位了。 这也被认为是 IE6 CSS。 HACK它，只是小心不要混合它们。
3、绝对定位的使用条件——
:::绝对定位的使用通常是父定义：定位，子定义：绝对定位属性，子使用左或右和上或绝对定位。
.{:}定义，通常最好定义CSS宽度和CSS高度
.-a{:;left:10px;top:10px} 这定义了距父级左侧 10px 的距离以及距父级顶部 10px 的距离。
或者
.-a{:;right:10px;:10px} 这定义了到父级右侧的距离为 10px，到父级底部的距离为 10px
对应HTML结构
这绝对将“-a”放置在父“”框中。
注意左（left）和右（right）只能在一个对象中选择一个定义，而下（）和上（top）也只能在一个对象中选择一个定义。
4、应用案例-
这里给大家举一个应用绝对定位的例子。 我们将最外面的盒子的css边框设置为红色，css宽度设置为400px，css设置为200px。 里面有2个盒子。 为了对这两个盒子使用绝对定位，第一个盒子的 CSS 命名为“-a”，其宽度为 100px，背景色为黑色，高度为 100px，定位距离距父级 10px，距左侧的距离为10px； 第二个盒子CSS类名为“-b”，其宽度和高度分别为50px，css背景色为蓝色，距父级底部的距离为13px，距父级右侧的距离为15 像素。
1.css代码如下
- <style>
- .divcss5{ position:relative;width:400px;height:200px;
- border:1px solid #000}
- /* 定义父级position:relative 为就认为是绝对定位声明吧 */
- .divcss5-a{ position:absolute;width:100px;height:100px;
- left:10px;top:10px;background:#000}
- /* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */
- .divcss5-b{ position:absolute;width:50px;height:50px;
- right:15px;bottom:13px;background:#00F}
- /* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */
- style>
2.html代码片段
- <div class="divcss5">
- <div class="divcss5-a">div>
- <div class="divcss5-b">div>
- div>
3、DIV+CSS绝对定位案例截图
DIV+CSS绝对定位布局应用案例
5、CSS绝对定位总结——
通常我们使用:;:进行绝对定位布局，通过CSS定义定位，以及DIV布局HTML。 注意在哪里使用：和在哪里使用：用于定位。 同时，不要忘记使用left、right、top以及组合来定位具体位置。 绝对定位如果父级没有使用:，而是直接使用:绝对定位，此时body标签就会作为父级。 用途：定义对象无论在多少层DIV结构中，都会被拖出作为父级（参考层）进行绝对定位。 绝对定位非常好用，但一定不要滥用它，到处使用。 这有时会让你懒得计算上、下、左、右之间的距离，并且可能会导致 CSS 代码臃肿。 合适的地方使用才更实用。
在绝对定位中，我们可以使用css z-index来定义css图层的重叠顺序。
同时，对于left、right、top的值，可以使用()PS切片工具来获取准确的值。
如需转载，请注明文章出处及来源网址：
