1. 语法和结构
语法:
:
范围:
:无特殊定位,对象遵循HTML定位规则
:将对象拖出文档流,使用左、右、上等属性进行绝对定位。 它的级联是通过 css z-index 属性定义的。该对象现在没有边距,但仍然有内边距和边框
:对象不能堆叠,但会根据左、右、上等属性在正常文档流中偏移。
阐明:
设置对象的定位方式可以使布局图层易于绝对定位,更准确地控制盒子对象。
2. 实际使用
绝对定位用于定位盒子对象。 有时一个布局中有几个小对象,很难使用css或css进行相对定位。 这种情况下,我们可以使用绝对定位来轻松做到。 尤其是对于一个盒子里几个小盒子的不规则布局,这时候我们使用绝对定位来布局对象就非常方便了。
1、绝对定位演示适用于图片和不规则布局,因此可以使用:;:进行绝对定位。
2、绝对定位和浮动不能同时使用。 比如一个大盒子,有的采用绝对定位,有的采用css float浮动定位。 这样,IE6浏览器就不会显示大对象中的绝对定位和相对定位,这被认为是IE6 CSS HACK,只是注意不要混合使用。
3、使用绝对定位的条件
:::绝对定位的使用通常是父定义:定位,子定义:绝对定位属性,子使用左或右和上或绝对定位。
.divcss5{position:relative} 定义,通常最好再定义CSS宽度和CSS高度 .divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px,距离父级上边距离为10px 或 .divcss5-a{position:absolute;right:10px;bottom:10px} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px
对应HTML结构class="divcss5">class="divcss5-a">
这绝对将“-a”放置在父“”框中。
注意左(left)和右(right)只能在一个对象中选择一个定义,而下()和上(top)也只能在一个对象中选择一个定义。
4、应用案例
这里给大家举一个应用绝对定位的例子。 我们将最外层盒子的css边框设置为红色,css宽度设置为400px,css设置为200px,里面包含