From css-tricks : 
从CSS技巧 ：
Static. 静态的。 This is the default for every single page element. 这是每个页面元素的默认设置。 Different elements don't have different default values for positioning, they all start out as static. 不同的元素没有不同的默认定位值，它们都以静态开始。 Static doesn't mean much, it just means that the element will flow into the page as it normally would. 静态的含义并不多，仅表示元素将像往常一样流入页面。 The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. 您曾经将元素设置为position的唯一原因是：static是强制删除一些应用于控件外部元素的位置。 This is fairly rare, as positioning doesn't cascade. 这是相当罕见的，因为定位不会级联。
Relative . 相对的 。 This type of positioning is probably the most confusing and misused. 这种定位可能是最容易混淆和误用的位置。 What it really means is "relative to itself". 它真正的意思是“相对于自身”。 If you set position: relative; 如果您设置位置：相对； on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; 在没有其他定位属性（顶部，左侧，底部或右侧）的元素上，它完全不会影响其位置，这与将其保留在位置上的效果完全相同：static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. 但是，如果您确实给它其他一些定位属性，例如top：10px ;，它将把它的位置从正常位置下移10个像素。 I'm sure you can imagine, the ability to shift an element around based on it's regular position is pretty useful. 我相信您可以想象，基于元素的常规位置来移动元素的功能非常有用。 I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to. 我发现自己经常使用这种方法来排列表单元素，而这些元素倾向于不希望按照我的方式排列。
There are two other things that happen when you set position: relative; 设置位置时还会发生其他两件事： 相对； on an element that you should be aware of. 在您应该注意的元素上。 One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. 其一是它引入了在该元素上使用z-index的功能，这实际上不适用于静态定位的元素。 Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. 即使您未设置z-index值，该元素现在也将出现在任何其他静态定位的元素之上。 You can't fight it by setting a higher z-index value on a statically positioned element. 您不能通过在静态定位的元素上设置更高的z-index值来对抗它。 The other thing that happens is it limits the scope of absolutely positioned child elements. 发生的另一件事是它限制了绝对定位的子元素的范围。 Any element that is a child of the relatively positioned element can be absolutely positioned within that block. 作为相对定位元素的子元素的任何元素都可以绝对定位在该块内。 This brings up some powerful opportunities which I talk about here. 这带来了一些强大的机会，在此我将进行讨论。
Absolute. 绝对。 This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. 这是一种非常强大的定位类型，可让您将任何页面元素确切地放置在所需的位置。 You use the positioning attributes top, left bottom and right to set the location. 您可以使用顶部，左侧，底部和右侧的定位属性来设置位置。 Remember that these values will be relative to the next parent element with relative (or absolute) positioning. 请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。 If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself. 如果没有这样的父级，它将默认一直返回到元素本身，这意味着它将相对于页面本身放置。 The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. 关于绝对定位的权衡和要记住的最重要的事情是，这些元素已从页面上的元素流中删除。 An element with this type of positioning is not affected by other elements and it doesn't affect other elements. 具有这种定位类型的元素不会受到其他元素的影响，也不会影响其他元素。 This is a serious thing to consider every time you use absolute positioning. 每次您使用绝对定位时，都要考虑这一点。 It's overuse or improper use can limit the flexibility of your site. 过度使用或使用不当会限制您网站的灵活性。
Fixed. 固定。 This type of positioning is fairly rare but certainly has its uses. 这种定位很少见，但肯定有其用途。 A fixed position element is positioned relative to the viewport, or the browser window itself. 固定位置元素相对于视口或浏览器窗口本身定位。 The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect a bit like the old school "frames" days. 滚动窗口时，视口不会改变，因此固定位置的元素将保持在滚动页面时的位置，从而产生一种类似于老式“框架”时代的效果。 Take a look at this site (update: dead link, sorry), where the left sidebar is fixed. 看一下该站点（更新：死链接，抱歉），该站点的左侧边栏已固定。 This site is a perfect example for since it exhibits both good and bad traits of fixed positioning. 该网站展现出固定定位的优点和缺点，因此是一个完美的例子。 The good is that it keeps the navigation present at all times on the page and it creates and interested effect on the page. 好处是，它可使导航始终显示在页面上，并在页面上产生有趣的效果。 The bad is that there are some usability concerns. 不利的是，存在一些可用性问题。 On my smallish laptop, the content in the sidebar is cut off and there is no way from me to scroll down to see the rest of that content. 在我较小的笔记本电脑上，侧边栏中的内容被切断，我无法向下滚动以查看其余内容。 Also if I scroll all the way down to the footer, it overlaps the footer content not allowing me to see all of that. 另外，如果我一直向下滚动到页脚，它会与页脚内容重叠，使我无法看到所有内容。 Cool effect, can be useful, but needs to be thoroughly tested. 很酷的效果，可能会有用，但是需要进行彻底的测试。
