h5小白笔记day07

定位

认识定位

原理：定位的元素超出文档流

        什么时候需要用到定位？

        在同一块文档流的区域内，需要同时叠放多个标签

        定位的流程：

        1.通过 position 属性设置定位的参照物

        2.通过 方位属性，设置具体方位的定位数据，方位属性有 top，left，right，bottom，他是用来设置距离参照物有多远

        他们的优先级是 left>right

                      top>bottom

        position 属性的值

            static relative absolute fixed

        static：静态定位，无参照物，不定位

        relative：相对定位，以 元素本身没有移动之前的位置为参照物

        absolute：绝对定位，以 当前元素的 第一个具有定位属性的祖先级元素 为 参照物，作为参照物的祖先级元素，必须具有

            position: relative 或则 position: absolute 设置

        如果没有定位的祖先级属性，则参照物是 body

        fixed：固定定位，相对于浏览器窗口定位

定位的特点

相对定位的特点：

        1.相对定位是基于元素原来的位置进行定位

        2.元素设置了相对定位以后，对于元素本身没有任何影响

        3.元素设置了相对定位以后，虽然元素脱离了文档流，但是元素本身的位置依然占据文档流的空间

        4.相对定位的元素，天然的提升层级，比没有定位的元素层级高

        5.相对定位的元素，可以通过 left top bottom right 改变元素的位置

 绝对定位的特点：

        1.设置了绝对定位的元素，会脱离文档流，不占据文档流空间，并且提升层级

        2.行元素设置完绝对定位以后，可以设置宽高，可以设置上下padding和上下margin，如果不设置宽高，宽高由内容撑开

        3.块元素设置了绝对定位以后，自动的margin消失，如果不设置宽高，宽高由内容撑开

        4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位，如果不存在这样的祖先级元素，则相对于 document（文档）定位。具有定位属性的祖先级元素，一般需要有 relative和absolute其中的一个定位属性

        5.一般的，如果设置了绝对定位，那么他的父元素需要有一个固定的高

固定定位的特点：

        1.固定定为相对于浏览器窗口定位

        2.固定定位脱离文档流

定位的层级

不做特殊设置的时候，

        定位元素的层级 比非定位元素的层级高

        定位元素后来者居上

        使用z-index 设置定位的层级，如果设置该属性，则默认为 0

        如果 z-index的值相同，则还是后加载的元素高于先加载的

        如果值不相同，值大的元素层级高

透明度

transparent 透明色

        opacity: 设置元素的透明度，可以使整个元素透明，包含元素里面所有的内容

        取值范围 0-1，0完全透明 1完全不透明

        行元素在垂直方向的对齐方式

        vertical-aline

            值：

            top：顶部对齐

            middle：中间对齐

            baseline：基线对齐

            bottom：底部对齐

        vertical-aline 只能使用在行元素或者内联元素(inline-block)上，不能使用在块元素上

        使用方式

        1.如果父元素的高度由其中一个子元素撑开，那么给其他元素设置 vertical-aline: middle; 就可以实现居中效果

        2.如果父元素高度固定，不是子元素撑开高度，则可以通过 添加一个自定义标签，该标签的高度为父元素的高度，然后设置 vertical-align: middle;和

        display: inline-block;就可以使父元素的内容居中

        vertical-align 也可以同来解决img标签的缝隙