CSS布局

CSS布局

子级绝对定位，父级相对定位的由来（子绝父相）

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2. 父盒子需要加定位限制子盒子在父盒子内显示。
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

static

静态定位
默认定位，按照标准流特性摆放位置，没有边偏移
很少用到
position:static

relative

相对定位
相对定位是元素在移动的时候，相对它原来的位置来说的，但元素所占的空间还保留在原位，其他元素无法占用

absolute

绝对定位
会把元素移除原本的文档流，其他元素会占领位置，位置是相对于包含元素而言的，相对于父级元素来移动

fixed

固定定位
无论页面如何滚动，元素都会固定在同一个位置，它的包含元素（父元素）是当前浏览器窗口
可以设置left:0;right:0;使宽度占满容器
或是设置top:0;bottom:0;使高度占满容器

.footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background-color: azure;
    }

sticky

相当于relative和fixed的结合体，可以使元素固定在定位点，其他元素正常滚动

nav{
position: sticky;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: orange;
}

设置z-index来确定元素的上下层，z-ind是Z轴方向的偏移，数值越大，距离人眼越近