关于position定位的一些理解

定位: 目的-------布局

步骤:

1. 第一步: 通过position属性设置定位元素相对于谁进行定位(找个参照物)
2. 第二部: 通过设置left right top bottom 属性 确定定位元素距离 参考元素的位置.

优先级:

• left>right
• top>bottom

position 属性值:

1. relative相对定位,于当前标签没有移动之前的位置为参照进行定位,不会将对应的标签从父级中脱离出来(不会脱离文档流)
2. absolute (重点,频率最高)绝对定位;已定位父元素为参照进行定位,并且已定位父元素的属性 值必须为relative absolute或者fixed,如果父级标签中都没有定位,最终标签会以document为参照进行定位, 元素设置absolute之后,会从父元素中脱离出来(脱离文档流),提升层级.
3. fiexd 固定定位: 以浏览器窗口为参照物进行定位,也会让当前元素从文档流中脱离出来(脱离文档流)
4. static(默认值)静态定位,无参照物,不会进行定位

------------------------------------------------------------------------------------------>

绝对定位: 

• 相对于已定位父元素进行定位,并且父元素position属性值为relative absolute fixed

如果没有已定位父级 会相对于 document 进行定位.

特征: 

第一 脱离文档流 (父级不在保留元素原来的位置 )

第二 提升层级

第三 结合相对定位使用(给父元素设置position:relative)

第四 如果给块元素设置相对定位,宽高默认有内容撑开 不在独占一行,margin 的左右auto失效

第五 行元素设置绝对定位后,行元素会支持宽高的设置,支持上下的padding border margin

后定位的元素会盖先定位的元素

-->

固定定位: 

•  相对于浏览器窗口进行定位

特征:

1, 固定之后,元素脱离文档流(父级不会保留该元素的高度)

2, 提升层级

3, 父元素设置固定定位,不用清除子元素浮动所产生的影响

4 , IE6不兼容

5, 如果给块元素设置固定对定位,宽高默认有内容撑开 不在独占一行,margin 的左右auto失效

6, 行元素设置固定定位后,行元素会支持宽高的设置,支持上下的padding border margin

后定位的元素会盖先定位的元素

<div class="fatDiv">   
  <div class="sonDiv"></div>
</div>
<p>sdafasasdsa</p>
<style type="text/css">   
.fatDiv{      
   width: 300px;     
   height: 300px;      
   background-color: red;      
   margin: 0 auto;      
   /*第一步:设置position属性*/      
   position: relative;      
   /*第二步:确定位置*/      
   /*left: 200px;*/      
   /*top: -50px;*/    
}    
.sonDiv{      
    width: 200px;     
    height: 200px;      
    background-color: yellow;      
    position: absolute;      
    /*margin: 0 auto;*/      
    left: 50px;      
    right: 100px;      
    /*top: 50px;*/    
}
</style>复制代码

层级

z-index: 用来调整定位元素的层级值越大,元素显示越靠前,该属性的默认值为0,当元素的z-index 相同时,遵循后来居上的原则(后定位的元素会盖住先定位的元素)。

设置透明度的第一种方式:设置opacity 属性，属性的取值范围: 0~1

IE 6 不识别opacity属性,是通过 filter属性来设置透明度的

语法结构:

filter:alpha(opacity=50);

取值范围 0~100;

/*第二种设置透明度的方式*/

background-color: rgba(0,0,0,0.5);

努力做好每一件事，会不定期更新自己所学所得所知。

转载于:https://juejin.im/post/5c8f3d82f265da61103b3c97