// html<body> <div>I am div1</div> <div>I am div2</div> <div>I am div3</div></body>// cssdiv { background-color: lightgrey; width: 100px; height: 50px;} div:nth-child(2) { background-color: yellow; width: 100px; height: 50px;}div:last-child { background-color: red; width: 100px; height: 50px;}内联元素表现不一样——它们不会涌如今新行上；相反，它们相互之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。
// html<body> <span>I am span1</span> <span>I am span2</span> <span>I am span3</span></body>// cssspan { background-color: lightgrey; width: 100px; height: 50px;} span:nth-child(2) { background-color: yellow; width: 100px; height: 50px;}span:last-child { background-color: red; width: 100px; height: 50px;}脱标
所谓脱标，便是分开了”标准流“（有的叫”正常流“，英文是”normal flow“），本来该霸占的位置就不再霸占了，下一个元素会霸占它的位置，此时元素会涌现重叠征象，通过设置z-index大小来显示元素重叠顺序。
static 定位static 是浏览器的默认定位办法，如果没有给元素 style 添加 position，那么便是 static 定位。该定位的特色是： 基准点：按代码的顺序来决定元素的布局，正常显示模式，即所谓的”标准流“。 边偏移：通过设置 top right bottom left 无效。 脱标：不脱标，正常霸占该有的位置，不影响下一个元素布局。 利用场景：打消定位，即一个设置了非static定位的box，不要定位了，就利用static打消，在浏览器调试过程中非常主要，比如，可通过static查看原有的位置该当在哪。
// html<body> <div>test static position</div></body>// cssdiv { background-color: pink; top: 100px;} relative 定位
relative 相对定位办法，该定位办法的特色是： 基准点：自己在static定位模式下的位置作为基准点，俗称元素的默认位置。 边偏移：必须通过设置 top / right / bottom / left 来准确定位。 脱标：不脱标，正常霸占该有的位置，不影响下一个元素布局，下一个元素仍旧以”标准流“看待它。 利用场景：一个很常用的口诀”子绝父相“，如果子元素须要设置absolute定位的时候，父元素可设置relative，当然还有其他场景了，这里不一一列举。
<body> <div class="father"> <div class="son"></div> </div></body>// css.father { background-color: lightgrey; width: 300px; height: 200px;} .son { background-color: yellow; position: relative; top: 20px; width: 200px; height: 100px;} absolute 定位
absolute 绝对定位办法，该定位办法的特色是： 基准点：一样平常是父元素，但是条件是父元素设置了一个非非非static定位，如果父元素没有设置定位，那么就以浏览器窗口作为基点。 边偏移：必须通过设置 top / right / bottom / left 来准确定位。 脱标：完备脱标，不霸占该有的位置，影响下一个元素布局，下一个元素就当该元素不存在。 利用场景：如果一个元素须要以父元素的（0，0）坐标点对齐的时候，可以立时想到 absolute ，还有须要转化为inline-block模式也可以利用absolute。
//html<body> <div class="father"> <div class="son"></div> <div class="son2"></div> </div></body>// css.father { background-color: lightgrey; width: 300px; height: 200px;} .son { background-color: yellow; position: absolute; top: 20px; width: 100px; height: 100px;} .son2 { background-color: red; top: 20px; width: 200px; height: 150px;} fixed 定位
fixed 固定定位办法，该定位办法的特色是： 基准点：浏览器窗口为基点，不管页面怎么布局与滚动，该位置就固定不动。 边偏移：必须通过设置 top / right / bottom / left 来准确定位。 脱标：完备脱标，不霸占该有的位置，影响下一个元素布局，下一个元素就当该元素不存在。 利用场景：比如页面可恶的广告，你怎么滑动就停在那里不动。
// html<body> <div class="father"> <div class="son"></div> <div class="son2"></div> </div></body>// css.father { background-color: lightgrey; width: 300px; height: 200px;} .son { background-color: yellow; position: fixed; right: 10px; width: 100px; height: 100px;} .son2 { background-color: red; top: 20px; width: 200px; height: 150px;} sticky 定位
sticky 粘性定位办法，该定位实在包含了 relative 与 fixed 这两种定位模式，但不是同时存在，须要一个触发条件，即边偏移 top / right / bottom / left 的值达到后就会切换 fixed 办法，不同定位办法，就分别显示该办法的定位特色。 基准点：relative 办法以自身位置为基准点; fixed 办法以浏览器窗口为基点。 边偏移：如果设置 top / right / bottom / left 就会同时具备relative 与 fixed 这两种定位模式，如果没设置就默认 relative， 脱标：relative 不脱标，fixed 脱标 利用场景：比如页面可恶的广告，你怎么滑动就停在那里不动。
// html<body> <div class="father"> <div class="son"></div> <div class="son2"></div> </div></body>// css.father { background-color: lightgrey; position: relative; left: 200px; width: 300px; height: 1000px;} .son { background-color: yellow; position: sticky; top: 30px; width: 90px; height: 60px;} .son2 { background-color: red; top: 20px; width: 200px; height: 150px;} 结语
以上便是对各种定位的阐明，在实际事情中大概会很繁芜，但基本都是这些定位的奥妙利用，如果讲述有什么缺点，欢迎留言评论，码子码图不易，码gif图更不随意马虎，转载请注明出处，感激。
