css查漏补缺day04

0x00 定位

    相对定位不脱标，偏移量是根据本身来移动的；

    绝对定位在移动位置的时候，是相对它的祖先元素来移动的。当没有祖先元素或者祖先元素无定位时，以document为祖先元素

    当祖先元素有定位时，则已最近的有定位的祖先元素来进行偏移。

    绝对定位脱标，不占有原有的位置

    当子元素需要用绝对定位时，父元素需要用相对定位

    固定定位fixed也是脱标的，可以看成特殊的绝对定位

    fixed的元素一般left和margin-left配合使用，可以做到固定在版心右侧的效果等

    sticky粘性定位以可视窗口为参照点移动元素，但粘性定位依然占有原来的位置

.div {
    position:sticky;
    top:0; // 必须设置四个方位值中的一个才生效
    width:100px;
    height:100px;
}

    z-index可以设置定位的叠放顺序，数字越大图层优先级越高

    如果没有定义index，则默认后写的元素居上

    只有定位盒子有z-index

    加了绝对定位的盒子不能使用margin：0 auto来设置水平居中。可以使用以下方法来水平居中

.div {
    position:absolute;
    width:300px;
    height:300px;
    left:50%;
    margin-left:150px; // .div盒子宽度的一半
}

    行内元素给与定位后，可以给它设置宽度和高度

    块级元素设置定位后，没有设置宽度高度，默认大小与内容相等

0x01 元素的显示和隐藏

     display属性常用的属性none与block，block表示将元素转换为块元素，常用于显示元素

     隐藏的元素不占原来的位置

     visibility属性常用属性为visible(表示元素可见),hidden(元素隐藏)

     与display最大的区别在于隐藏的元素占原来的位置

     overflow属性用来隐藏溢出的部分,scroll显示滚动条，hidden隐藏溢出的元素，anto自动处理