Python-day53：盒子的隐藏、阴影、固定定位、绝对定位、相对定位

## 标签的隐藏

```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：-标签宽度的一半。（前面是负号）这样才居中！！

```