html定位

 /*

         知识点：

          - 定位

         描述：

          - 定位：指将元素放置到页面中的指定位置

          - 属性：position

          - 可选值：

             static：默认值，元素位置没有变化，可以理解为没有开启定位

             relative：开启相对定位，相对于原始位置

             absolute: 开启绝对定位

             fixed：开启固定定位

         - 开启定义： position的值为非static

         - 通过：lesft，right，top，bottom四个属性设置元素位置

         - 通常我们用水平+垂直两个方向来确定元素的位置

        */

知识点：

        - 相对定位

        描述：

        - 如果开启相对定位，不设置偏移量，则元素保持原始位置不会发生移动

        - 相对于元素的原始位置(文档流中的位置)进行定位

        - 不会脱离文档流，原始位置保留

        - 原始会提升一个层级

        - 元素层级由上往下，依次提高（默认状态）

        - 不会改变元素的框类型，内联和块不会发生改变

        - 如果元素浮动，则相对定位以浮动后的位置作为参考点

知识点：

             - 绝对定位

           描述：

            - 脱离文档流，默认宽度消失，但依然可设置宽高

            - 如果不设置偏移量，则位置默认不变

            - 相对于离它最近的开启了定位的祖先元素进行定位

            - 如果祖先元素没有定位，则以页面左上角进行定位

            - 提升层级，元素从上往下，依次提高（默认）

            - 改变元素框类型

               -块会改变为类似行内块，默认宽和高由内容撑开，但可以设置宽和高  

               -行内元素改变为行内块，默认宽和高由内容撑开，但可以设置宽和高

             -我们在开发中使用子元素绝对定位时，一般都会开启父元素的相对定位

知识点：

             - 固定定位

            描述：

             - 固定定位也是一种绝对定位，大部分特征和绝对定位相同

             相同点：

              - 脱离文档流

              - 不设置偏移量，则默认位置不变

              - 会提升层级

             

            不同点：

              - 绝对定位中如果祖先元素没有定位，则以页面的左上角进行定位，元素随滚动移动

             

              - 固定定位，以浏览器窗口的左上角进行定位，元素不随滚动条移动

知识点：

             - 元素层级

           描述：

            - 元素默认在文档流中

            - 开启定位元素都会提升层级

            - 默认从上往下的布局顺序，进行层层叠加，越往后越高

            - z-index：设置元素层级，值越大，层级越高

            - 没有开启定位，则z-index属性值不起作用

            - 父元素层级再高也不能覆盖子元素

.box{

        width: 100px;

        height: 100px;

        background-color: black;

        opacity: 0.5;   透明度

    }