css position的用法

CSS positioning lets you set how you want an element to be positioned in the browser. It has a position property you can set to static, absolute, relative, sticky or fixed.

Once you set the position property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the top, right, left, or bottom properties.

static is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with top, right, left, or bottom.

如果position是static（默认），top、right这些都不起作用，比如：

position: static;
top: 100px;
left: 100px;

但是如果变成relative，就会起作用：

position: relative;
top: 100px;
left: 100px;

如果变成absolute，元素会出了流，根据页面来定位：

position: absolute;
top: 100px;
left: 100px;

如果变成fixed，元素会固定住，不管怎么滚动页面位置都不会变（可以用在上下导航）：

position: absolute;
top: 100px;
left: 100px;

如果变成fixed，元素会基于母容器固定住，类似absolute和fixed的结合体：

position: absolute;
top: 100px;

使用postion强制把元素放在中间：

position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;