## 标签的隐藏 ```python div { 100px; height: 100px; background-color: orange; border-radius: 50%; border: 1px solid red; font: normal 30px/100px 'Arial'; color: green; text-align: center; /*不以任何方式显示，在页面中不占位，但重新显示，任然占位*/ display: none; /*修改盒子的透明度，值为0，完全透明，但在页面中占位*/ opacity: 0.5; } ``` ## 标签的阴影 ```python 标签的阴影就是标签盒子的影子，显示和隐藏都不占位！！！ /*x轴偏移 y轴偏移 虚化程度 阴影宽度 颜色*/ box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green; ``` ## 标签的固定定位：postion ### 拥有postion属性的标签将有以下四个方法，否则无！ ### 四个定位方法：left、top、right、bottom ```python postion：fixed； 固定定位：参考系是浏览器窗口！！！ 1、一个标签要相对于窗口静止，采用固定定位 2、如果有多个固定定位标签，都是参考窗口，所以之间不相互影响，但可能出现图层重叠，通过 z-index 值绝对图层上下关系 ``` ## 标签的绝对定位： ```python postion:absolute 绝对定位：参考系是父标签，既相对父系是绝对位置定位，兄弟标签之前相互不应影响，如若图图层重叠，通过z-index值来决定图层上下关系。 因为绝对定位是相对父系的，所以自己绝对定位之前，一般先要父系做好定位处理（子标签绝对定位，它会向上寻找有定位属性的父级/祖先级标签，作为自己绝对定位的参考系！）进而引出了-------父相子绝。 另：才用绝对定位的标签，不再在文档流中占据位置。他会‘浮’起来，通过left、top等四个定位属性来定位。 ``` ## 标签的相对定位： ```python postion：relative 相对定位：相对本身原有位置，根据left、top等方法进行便宜，但是！ 原有位置依然在文档流中占有位置！偏移出来的标签盒子，会覆盖兄弟标签盒子。 相对定位、绝对定位区别： 绝对定位不在原有位置占位。参考系是有position属性的祖先级。 相对定位在原有位置占位。参考系是原有位置。 固定定位不占位，脱离文档流，相对浏览器页面定位。 ``` ## left、top、right、bottom四个定位方法： ```python 左距左、上距上、右距右、下距下。 例： left:500px：参考系左侧距离定位标签的左侧距离500px。 意味着：left：50%；并不是居中还需要配合 margin-left：-标签宽度的一半。（前面是负号）这样才居中！！ ```