day70-CSS-position定位，z-index
1. 定位（position） 1.1 static static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。 1.2 relative（相对定位）
以自己原始位置为参照物。 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。 1.3 absolute（绝对定位） 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。 这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative; 然后Top、Right、Bottom、Left用百分比宽度表示。 另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 1.4 fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。 而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。 这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 示例：返回顶部按钮 <div class="fixed-test">返回顶部</div> .fixed-test{ position:fixed; right:20px; bottom:20px; background:grey; } 2. z-index 设置对象的层叠顺序。 2.1 z-index 值表示谁压着谁，数值大的压盖住数值小的。 2.2 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index。 2.3 z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样， 那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 示例1： <body> <div class="c1"></div> <div class="c2"></div> </body> .c1{ width:150px; height:150px; background-color:red; position:relative; /*z-index必须作用于定位过的元素，哪怕没有top right bottom left值*/ z-index:2; /*2比c2的0要大，所以可以压着c2*/ } .c2{ width:200px; height:200px; background-color:green; position:relative; top:-150px; z-index:0; /*默认值是0，不写也可以*/ }示例2：模态框示例,点击链接或者图片，弹出登录或者注册的界面，背景颜色变得透明。 <body> <div class="c1"></div> <div class="c2"></div> </body> .c1{ background-color:rgba(0,0,0,0.5); position:fixed; top:0; right:0; bottom:0; left:0; /*top right bottom left都是0就把背景布满整个页面*/ z-index:0; /*z-index:0比c2的z-index:1要小，所以被压住*/ } .c2{ background-color:white; width:600px; height:400px; position:fixed; top:50%; left:50%; margin:-200px 0 0 -300px; /*向上移动200，向左移动300，也就是宽高的一半，才能居中*/ z-index:1; }
3. opacity 改变标签所有元素的透明度，而rgba只改变背景透明度。取值范围是0~1，0是完全透明，1是完全不透明。 div{ opacity : 0.5 }
