课程：

• 1、HTML中DIV的相对定位与绝对定位如何操作？
• 2、html如何设置相对于某元素的位置？
• 3、HTML之相对定位
• 4、html的相对定位和绝对定位是什么意思
• 5、html定位的几种方式
• 6、html常用的三种定位是什么

HTML中DIV的相对定位与绝对定位如何操作？

绝对定位（absolute）：

当一个DIV块的位置被定义为绝对定位的时候，也就意味着它失去了文档流的位置，后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是零，那么它将漂浮在原来的位置上。否则就会以浏览器的上下左右四边为基准进行偏移。

相对定位（relative）:

当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不会被下面的DIV块挤占，而是空在那里；当偏移后向下或者向右的内容会被隐藏，而 这一点区别于绝对定位，绝对定位会出现滚动条。但是向左或者向右的内容超出当前浏览器的视线，无论是相对还是觉得定位，超出的部分都会被隐藏。

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位(absolute)：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值(目前负值FF不支持)。

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

html如何设置相对于某元素的位置？

可以设置absolute定位解决

absolute是相对其最近的一个祖先元素position不为默认值的定位。

所以此种情况可以将需要定位的元素放到第fixed元素的内部，并设置absolute定位，就可以通过top righ属性控制器相对fixed的位置了

有问题欢迎追问，追问请先关注我，否则不回复，谢谢

HTML之相对定位

建议两种方法 第一种是把图片改为背景图片如下：

div style="width:100%;height:100%; margin:0 auto; background-image:url(你图片的地址)"

div stlye="width:570px; height:260px; background-color:#FFF;padding-top:117;px;margin:0 auto;"

/div

/div

第二种方法改图片为定位脱离文档流

div style="position:absolute;

img src="图片地址" style="position:absolute;z-index:-1;"

div style="width:570px; height:260px; background-color:#FFF; top:117px;position:absolute;z-index:1;"

/div

/div

若有不对地方 请大家也指出一下

html的相对定位和绝对定位是什么意思

position：absolute这个是绝对定位；是相对于浏览器的定位。比如：position：absolute；left:20px;top:80px;

这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top

left在定位。应该用margin。比如：div

class="4229-a74c-cd57-0642 1"/divdiv

class="a74c-cd57-0642-4959 2"/div当1固定了位置。1的样式float:left;width:100px;

height:800px;2的样式为float:left;

position：relative；margin-left:20px;width:50px;2的位置在1的右边，距离120px

html定位的几种方式

① CSS有三种定位方式：相对定位，绝对定位，固定定位；

② 相对定位-position：relative；

③ 绝对定位-position：absolute；

④ 固定定位-position：fixed；

html常用的三种定位是什么

在一般的前端开发中比较常用的定位有三种：相对定位，绝对定位，固定定位。

下面简要的说明一下他们的使用特点：

相对定位position:relative 1.它可以在四个方向分别或者同时进行偏移

2.定义时它的参照物是父元素（没有时为浏览器本身）

3.偏移后元素的原来位置还是被占着，并没有空出来

4.当父元素和子元素同时定义时，他们的参照物是父元素，且占据原来的位置

绝对定位position:absolute 1. 它可以在四个方向分别或者同时进行偏移

2.单独定义时它的参照物是浏览器本身，且不占据原来的位置

3.当父元素和子元素同时定义时，他们的参照物是父元素，且不占据原来的位置

4.当子元素绝对定位，父元素相对定位时，他们的参照物是父元素，且还占据原来的位置

5.当子元素相对定位，父元素绝对定位时，他们的参照物是父元素，且不占据原来的位置

固定定位position:fixed 1.它可以在四个方向分别或者同时进行偏移

2.定义时它总是以浏览器为参照物，且不占据原来的位置

3.它不会随着浏览器的滚动而移动，即会固定在所能到观察浏览器界面的固定地方

注：普遍使用方式为子绝父相，即子元素绝对定位，父元素相对定位

可以使用z-index: 来进行优先级显示