一、relative

相对原先的位置进行定位

{position: relative;left: 50px;         /*  相对原先位置左边的距离 */top: 100px;         /*  相对原先位置上边的距离 */
}

二、absolute

绝对定位，是相对于最近有定位的父级元素进行定位

{position: absolute;right: 50px;            /*  右边距离父级元素的距离 */bottom: 100px;          /*  下边距离父级元素的距离 */
}

三、fixed

固定定位，不会随着页面滚动而滚动，相当于定在了页面上

{position: fixed;left: 50px;         /*  距离页面最左侧的距离  */top: 100px;         /*  距离页面最上边的距离  */
}

四、sticky

粘性定位，在没到达指定位置之前会进行滚动，到达指定位置会定在页面上

{position: sticky;top: 20px;          /*  距离页面上边20px时粘定，可以换成left、right、bottom */
}