postion定位属性

属性 描述
static 静态定位 默认值,遵循正常文档流,不受top、bottom、left、right属性的影响
fixed 固定定位 以浏览器视口为基准,脱离正常文档流,常用来实现页面元素垂直水平居中
relative 相对定位 相对元素原来的位置进行偏移,会保留原位置
absolute 绝对定位 相对于父级的相对定位进行位置偏移,脱离正常文档流,不占原位置,子绝父相
sticky 粘性定位 位置偏移相对于自身的位置,可以实现鼠标滚动时位置不动

固定定位实现页面元素水平垂直居中

.father {
            width: 200px;
            height: 200px;
            background-color: red;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }

你可能感兴趣的:(前端,javascript,html)