css中,绝对定位和相对定位是什么意思?通常都是怎么用?

html-css019

css中,绝对定位和相对定位是什么意思?通常都是怎么用?,第1张

绝对定位是相对于父标签决定位置,一般用于相对定位标签里面,JS特效经常用到。

相对定位是相对于上一个相对定位的。一般用于浮动定位标签里面,一般跟绝对定位配合使用。

浮动定位才是常用的。

看例子:

<body>

<div

id="bq1"

style="

position:absolute

left:10px

top:10px

"></div>

<div

id="bq2"

style="

position:relative"></div>

<div

id="bq3"

style="

position:relative">

<div

id="bq4"

style="

position:absolute

left:10px

top:10px"></div>

</div>

</body>

以下只说id名代表div

绝对定位:position:absolute

如果bq1(绝对定位)外面没有div等父标签,bq1会以body为父标签。左边距距body

10像素,上边距距body

10像素。

如果bq4(绝对定位)在bq3(相对定位)里面,左边距距bq3

10像素,上边距距bq3

10像素。

相对定位:position:relative

bq2(相对定位)总是相对于前面的同级标签为基准标签(bq1)。

bq3以bq2为基准标签。

绝对定位(absolute)意思是:将被赋予此定位方法的对象从文档流中拖出,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的。

相对定位(relative)意思:对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

相对定位是默认的定位方式。是相对于其他元素的一种定位方式,当附近有元素占据空间时,会根据当前元素的空间确定位置,会受到其他元素的影响。

绝对定位,是相对于父层及以上具有定位方式的元素进行定位,不受其他元素的影响。