css深入理解relative

標籤：標籤   影響   理解   存在   限制   css   絕對位置   nbsp   元素定位   

第一講     relative和absolute相煎關係

         同源性

                   .position:relative

                   .position:absolute

         限制作用

                   1.限制left/top/right/bottom定位

                   2.限制z-index層級

                   3.限制在overflow下囂張氣焰

 

                   1.限制定位，如果沒有relative限制，元素定位absolute會可以在任何地方定位

                   2.限制層級 z-index 層級越高

                   3.限制超越overflow

         relative與fixed

                   同源性

                            .position:relative

                            .position:fixed

                   限制作用

                            限制層級

第二講 relative和定位

         1.相對自身

                   left/top是相對於自身的。

         2.無入侵

                   不會影響到原來的布局

         無侵入定位的作用：自訂拖拽

 

         top/buttom 和left/right對立屬性同時存在時的表現

                   1.絕對位置是展開

                   2.相對定位是鬥爭

第三講relative和層級

         1.提高層疊上下文

 

第四講relative的最小化影響原則

         所謂relative的最小化影響原則指的是盡量降低relative屬性堆其他元素或布局的潛在影響！

         1.盡量避免使用relative

                   absolute定位不依賴relative

         2.relative最小化

                   position:absolute的元素外層加一個標籤

                   外層加position:relative 是不會佔據任何空間的。

css深入理解relative