css中的绝对定位和相对定位

html-css019

css中的绝对定位和相对定位,第1张

css中的绝对定位，意思就是把元素的左上角固定到浏览器窗口的某个指定的唯一的坐标点上。

css中的相对定位，意思是是相对于上一个相对定位的，总是相对于前面的同级标签为基准标签。

不管是什么定位都需要有一个参照物。相对定位的参照物是本身。绝对定位的参照物就是父级元素。两种定位产生的影响也不同。相对定位，设置后，原来的位置始终保留着。绝对定位，设置后，原来的位置会被后面的内容占据。

css不改变原位置的使多个图片在原地动画的实现方法：

1、在css中，可以使用固定定位（position：fixed）来定位图片保持图片位置不变，让图片位置可以不随着文字的拖动而改变图片位置。

2、position：fixed用于生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left"，"top"，"right"以及"bottom"属性进行规定。

3、fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

4、固定定位（position：fixed）：元素以相对浏览器窗口为基准进行定位的，无论怎样移动你的滑动条，它都会固定在相对于浏览器窗口的固定位置，另外要注意，它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top，bottom，left，right也是相对于浏览器窗口而言的。

绝对定位是相对于父标签决定位置，一般用于相对定位标签里面，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为基准标签。