Question

HTML中DIV的相对定位与绝对定位

DIV是个大层，里面有3个DIV分别是DIV1，DIV2，DIV3。DIV1里面有个DIVa，无论怎么改变网页大小DIVa与DIV之间的距离保持相对​不变。这个应该怎么弄啊？

Answer 1

绝对定位（absolute）：

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

相对定位（relative）:

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

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

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

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

Answer 2

正确的做法是给最外边的div相对定位position:relative;
这时候不去考虑div1-div3
然后给diva绝对定位position:absalute;
再赋值：left:20%;top:20%;
就是：
.DIV {position:relative;}
.DIVa {position:absolute;left:20%;top:20%;}

追问

DIV1中的DIVa，就不能飘到DIV2上面了。

追答

忘记了，再加一个属性，z-index:99;

diva的

追问

还是不行，这个DIVa是在DIV1的一个UL中

类似这个样

追答

这个没有影响的，我在想，是不是div1-div3有定位的样式

追问

DIV1-DIV3吧DIV占满。都是向左对齐

追答

那你把刚刚给div的定位，改到div1上边

追问

一样不行。DIVa被DIV1好像是被拘束了。

追答

你说的不行是什么意思？按照我说的没问题，把你的样式代码还有前端页面截图贴出来

追问

<div>

 <div1>
   <ul>
      <li>
       <diva></div>
     </li>
  </ul>

</div>

  <div2></div>

  <div3></div>

</div>

这图的大概结构

追答

五一三溜溜八零六五

我的

🐧

发给我

我看看