一.相对定位小结
1.相对定位是相对自身位置进行位置调整
2.不脱离文档流
3.设置相对定位后,开启top,bottom,left,right,四个方位位置,优先选择top,left,
4.它的应用场景一般不用做自身位置调整,而是用于做绝对定位元素的容器样式
5.当定位出现堆叠效果,调整z-index值可以让元素的堆叠顺序发生变化,值越大,位置越靠前。
二.绝对定位小结
1.绝对定位元素,位置根据他最近一层的定位父级位置而确定
2.定位父级只要有定位属性就是定位父级,当绝对定位元素没有定位父级,它会一直往上层去找,一直找到html
3.元素设置绝对定位以后,完全脱离文档流,定位元素无法撑开父级的高度
4.当元素设置定位属性后,,left,top,并不是默认为0的位置,而是在定位之前的位置
5.绝对定位应用场景
①用于遮挡页和弹出框
②在用其他布局不影响其他元素布局情况下无法正常调整元素的位置,使用绝对定位
6.可以不考虑元素布局的先后顺序通过z-index来调整定位元素的堆叠顺序
7.不管是block元素或者inline元素,在设置绝对定位样式属性后元素便拥块属性
8.定位元素一般用四个方位值调整位置,不用margin让自身实际尺寸变大来调整位置,脱离文档流的绝对定位元素也是支持盒模型的。
z-index:用来提升定位元素的层级;z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效
定位元素不设置z-index相当于为0;
注意:设置定位的元素再去设置浮动是没有效果的。
设置定位元素的层级会提升,覆盖没有设置定位的元素,在定位元素都没有设置z-index的前提下,后面的定位元素覆盖前面的定位元素,如果设置了z-index,那么谁的值大,谁的层级高,谁就在最上层覆盖其他的定位元素,如果一样大,还是后面的覆盖前面的。
三.固定定位小结
1.固定定位是根据浏览器窗口进行位置调整
2.固定定位以后,元素脱离文档流
3.行标签设置固定定位后,页具有了块属性display变成了block
4.固定定位的应用场景
①消息广告弹窗
列子:
filter: alpha(opacity=50);
"filter: "alpha(opacity=50)";
filter这种用法是非标准用法,目的在与让ie8版本之前的版本兼容opactity
img{
width: 300px;
/*滤镜,现在主流浏览器都支持,包括ie8*/
/*filter: grayscale(100%);/*灰色处理*/
/*filter: opacity(50%);/*透明度处理*/
/*filter: blur(3px);*//*高斯模糊处理*/
/* filter: brightness(200px);亮度处理*/
/*filter: drop-shadow(0px 0px 20px blue);*/
/*阴影处理
1.x轴的偏移量
2.y轴的偏移量
3.模糊度
4.阴影的颜色*/
/*filter: sepia(100%);深褐色处理*/
/*filter: hue-rotate(1800deg);色相旋转*/
/*filter: saturate(700%);饱和度处理*/