CSS位置相对定位和绝对定位

 2024-02-01 03:06:04  阅读 0

1. 语法和结构

语法:

:

范围:

:无特殊定位,对象遵循HTML定位规则

:将对象拖出文档流,使用左、右、上等属性进行绝对定位。 它的级联是通过 css z-index 属性定义的。该对象现在没有边距,但仍然有内边距和边框

:对象不能堆叠,但会根据左、右、上等属性在正常文档流中偏移。

阐明:

设置对象的定位方式可以使布局图层易于绝对定位,更准确地控制盒子对象。

2. 实际使用

绝对定位用于定位盒子对象。 有时一个布局中有几个小对象,很难使用css或css进行相对定位。 这种情况下,我们可以使用绝对定位来轻松做到。 尤其是对于一个盒子里几个小盒子的不规则布局,这时候我们使用绝对定位来布局对象就非常方便了。

盒子定位方式_盒子的定位_position定位盒子方式

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,里面包含

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码