一 定位 (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;
}