绝对定位 相对定位

Posted 2020-06-09

绝对定位 有点像 float:left;   有包裹性  和 破坏性

但是绝对定位会脱离文档流，高度没了，宽度也没了，绝对元素会层叠到一起

 

position：absolute的块状元素会与float 元素重合，而行内元素不会

img{float:left;}     div{position: absolute;}  会重合

img{float:left;}     div{position: absolute;}  不会重合

 

inline-block 三大特性：包裹性，宽高可定义，图文混排

 

相对定位可以用来限制绝对定位，把绝对定位限制在里面：

.div img{position: absolute; top:100px; left:100px;}
.div{position: relative; background:blue; width:400px; height:400px;}

<div class="div"><img src="1.jpg" /></div>

父元素没有设置relative 之前，是相对窗口定位的，设定了以后相对于父元素定位

 

常用

左上角定位可以使用   position:absolute  + margin  

右上角定位可以使用   float +  position:relative

右下角定位    父标签  relative  +   子标签  position 

 

在应用了非 statia 的position 属性后，就算没有使用z-index，他的层级也会比普通元素高

.img{position:relative;}     //这张显示在上面，而通常是后面在上的原则
.img2{margin:-19px;}       

<img class="img" src="1.jpg" /><img class="img2" src="2.jpg">