HTML5第七天学习内容(定位 (position) 分类)

一  定位 (position) 目的 :  布局

定位 (position) 分类 : 有以下四种

            1️⃣   static (静态定位):        无参照物,不定位

            2️⃣   absolute (绝对定位):   是相对于已经定位父元素为参照,但是父元素position属性值必须是(absolute或relative)                                    如果父级中都没有 position属性,最终以文档document(整个页面)进行定位.

                                  绝对定位 ( absolute ) 特征: 

                                                                        1,脱离文档流

                                                                        2,提升元素层级

                                                                        3,块元素margin 的左右 auto 失效

                                                                        4,对块元素设置 绝对定位, 宽度不再独占一行,由内容撑开

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

              3️⃣    relative  (相对定位):    以自身没有移动之前的位置为参考

                                     相对定位 (relative ) 特征: 

                                                                        1,元素margin的左右auto不会失效

                                                                         2,元素不会脱离文档流

                                                                         3,相对于元素没有移动之前的位置进行定位

                                                                         4,提升元素层级

                                                                          

              4️⃣    fixed      (固定定位):    以浏览器窗口为参照物

                                    固定定位 (  fixed  ) 特征:

                                                                       1,脱离文档流

                                                                       2,提升元素层次(层级)

                                                                       3,父级固定定位后,不用清除浮动的影响

                                                                       4,IE 6不兼容该属性

二   层级

        层级: 后定位的元素会盖在先定位元素的上面

                原因是定位元素的 z-index属性默认值都是0,因此会有以上现象(后来居上),z-index属性值越大,元素的层级越靠上

三  透明度

                 1️⃣   标准浏览器中使用opacity调整透明度 (取值范围:0~1)  opacity:   0.5 ;

                 2️⃣   IE不识别opcity,使用自己的滤镜  alpha:滤镜中的透明度  opacity取值范围:0 ~ 100  filter:alpha(opacity=50);

                 3️⃣   只改背景的透明程度 background: rgba(255,0,0,0.3);

四  display(显示)

                 1️⃣ none:  此元素不会被显示  (写在自己下一代中)

                 2️⃣ block:  此元素将显示为块级元素,此元素前后会带有换行符 (结合后代选择器一块使用)

                               .fatDiv:hover .sonDiv{

                                    display: block;

                                }