-
blovetu
position：absolute这个是绝对定位；是相对于浏览器的定位。比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。比如：<div class="1"></div><div class="2"></div>你可以把相对定位当成是绝对定位父亲，那么position:relative天生可以限制position:absolute在left/top移动的能力。好像是如来的大手掌限制了孙猴子的筋斗云一样。
-
qq_非诚勿扰_3
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>绝对定位和相对定位</title> <style type="text/css"> body{ margin:0; padding:0; } div{ width:15%; border:#ccc solid 1px; margin-bottom:100px; margin-left:20px; } .absolute{ position: absolute; } .relative{ position: relative; } .float-left{ float:left; } .left{ left:10px; } .right{ right:0; } .overflow{ overflow:hidden; } </style></head><body> <div> <img alt="这是一张图片" src="board.jpg">什么都没有添加的情况下 </div> <div> <img alt="这是一张图片" src="board.jpg" class="relative left">图片添加了相对定位，父元素没有塌陷，因为其并没有脱离文档流，对其设置left是基于其本身位置的 </div> <div> <img alt="这是一张图片" src="board.jpg" class="absolute">图片添加了绝对定位，父元素高度塌陷了，跟浮动不同的是，绝对定位会遮住其他元素，相当于漂浮了 </div> <div> <img alt="这是一张图片" src="board.jpg" class="float-left">图片添加左浮动，同样是父元素塌陷，与上一个例子对比 </div> <div> <img alt="这是一张图片" src="board.jpg" class="float-left absolute">图片同时添加左浮动和绝对定位，可以看出浮动失效了 </div> <div> <img alt="这是一张图片" src="board.jpg" class="absolute left">图片添加了绝对定位，在设置left属性时是基于浏览器的位置 </div> <div class="relative"> <img alt="这是一张图片" src="board.jpg" class="absolute left">图片添加了绝对定位，且父元素添加了相对定位，这时的left属性变成了相对于父元素的位置，也就是说相对定位会限制绝对定位 </div> <div class="overflow"> <img alt="这是一张图片" src="board.jpg" class="absolute">图片添加了绝对定位，超出了父元素的范围，即使父元素设置了overflow:hidden，超出部分也会正常显示 </div> <div class="overflow relative"> <img alt="这是一张图片" src="board.jpg" class="absolute">图片添加了绝对定位，超出了父元素的范围，父元素设置了overflow:hidden，如父元素设置了relative，超出部分会被切除 </div></body></html>试试这个
-
刚毅87
position:relative 相对定位 定位的参考是基于它本身的位置 使用 top ，right ，bottom ，left 之前，我们首先需要给元素设置 position 否则不会产生任何效果;相对定位的特性： 1.相对定位不会影响元素本身的特性 2.相对定位不会使元素脱离文档流，元素位置移动之后，原始位置会保留 3.如果没有定义偏移量，对于元素本身没有任何影响 4.设置相对定位会提升层级绝对定位 position:absolute 1.参考的是离他最近已经定位的父元素，只要不是 static 就可以 2.绝对定位会使元素完全脱离文档流， 3.如果有定位父级发生了偏移，元素同样会随定位的父级发生偏移 4.相对定位一般配合绝对定位来使用 5.设置绝对定位会提升层级