描述一：定位 - static
在流中的元素定位属性值默认都为"static"，即没有定位。此时元素会忽略"top"、"bottom"、"left"、"right"和"z-index"定位属性。
现在给"section"盒子设置"left: 10px"，这时会发现定位属性无效。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。
根据题目所示是对定位的默认值 static 的了解，题目很简单，如果不了解定位的相关概念推荐看一下我之前的文章：定位 ，那么现在开始解题吧。
描述二：定位 - inherit
当一个元素的定位属性设置为"inherit"时，表示从父元素继承定位属性。现在虽然类名为"inner"的里盒子设置了"left: 10px"属性，但是这是无效的，因为该盒子的定位属性值为"static"。现在给里盒子添加"position: inherit"属性，表示从类名为"outer"的父级外盒子继承定位属性，现在发现里盒子的"left: 10px"属性依然没有生效，因为外盒子的定位值依然是"static"。最后再给外盒子添加"position: relative"属性，此时会发现里盒子向右移动了10px，定位属性"left"生效了。
根据题目所示是对定位属性的讲解，题目描述非常清楚，当一个元素的定位属性设置为"inherit"时，表示从父元素继承定位属性。那么现在开始解题吧。
描述三：定位 - absolute
绝对定位会把元素拿出文档流，不会再占据原来的空间。绝对定位元素的父级是距离该元素最近的定位祖先，也就是"position"属性不为"static"的最近任意祖先。如果没有这个定位祖先，那么绝对定位元素就相对于文档的根元素"html"进行定位。
当前类名为"outer"、"middle"、"inner"的盒子（外、中、里盒子）嵌套在一起，现在给三个盒子均设置左内边距10px，再自定义盒子背景颜色以便于观察。再给里盒子设置绝对定位属性"position: absolute"，会发现里盒子的位置并没有发生改变，因为绝对定位的默认位置是当前绝对定位盒子在流中的位置。继续给里盒子设置"left: 0px"属性，观察到里盒子是根据最外层盒子定位的，直接绕过了中间盒子，这是由于中间盒子的定位属性为默认的"static"，此时再给中间盒子设置定位属性"position: absolute"，会发现里盒子现在是根据中间盒子重新定位的。
根据题目所示是对绝对定位知识的考查，如果不清楚绝对定位的可以看一下我对绝对定位讲解的文章，上面已经给出链接，那么现在开始解题吧。
描述四：定位 - absolute - 评注
绝对定位非常适合创建弹出层、提示和对话框等覆盖于其他内容之上的组件。比如有一篇文章，可以给文章添加一些行内的评注，最好以气泡图的样式显示在文章外部的空白区域中。
绝对定位的元素默认会待在自己还在流中时的地方，现在给"aside"盒子设置绝对定位属性"position: absolute"，此时"aside"盒子从流中出来并且覆盖住了下方的元素，现在可以将它向左移动一些，把它定位到文章内容的左边。"article"盒子的左外边距为10rem，想让"aside"评注放在左边空白处的中间，需要进行计算，这里省略计算步骤。现在只需要将评注组件向左移动9rem即可。现在给评注组件设置"margin-left: -9rem"，在CSS中，负边距是完全有效的，负左外边距可以将元素往左拉，其他有趣的效果这里不做赘述。此时观察效果，评注在"相煎何太急？"内容的左边，可以很醒目的告诉读者该句的意思。
根据题目所示是对绝对定位知识的考查，如果不清楚绝对定位的可以看一下我对绝对定位讲解的文章，上面已经给出链接，那么现在开始解题吧。
描述五：定位 - z-index
z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。z-index可以设置为负数，且该属性只能作用于定位元素。
现在给"img"图片标签添加"position: absolute"、"left: 0px"和"top: 0px"属性，此时会发现图片被定绝对定位在了页面的左上角，并且遮挡住了下方的内容。现在继续给图片标签添加"z-index: -1"属性，现在图片堆叠在了字体内容的下方。
根据题目所示是对定位 z-index 知识的考查，如果不清楚 z-index 定位的可以看一下我对定位 z-index讲解的文章，上面已经给出链接，那么现在开始解题吧。
描述六：定位 - relative
相对定位的元素仍然会待在原来的地方，即不会从流中出来。此后可以通过"top"、"right"、"bottom"和"left"属性使元素相对于初始位置进行移动。现在给类名为"center"的盒子设置相对定位属性"position: relative"、设置"left: 50px"、设置"top: 50px"，再自定义背景颜色以便于观察。此时可以观察到中间盒子在原始的位置上向右、向下均移动了50px的距离，并且保留了原来的空间。
根据题目所示是对相对定位知识的考查，如果不清楚相对定位的可以看一下我对相对定位讲解的文章，上面已经给出链接，那么现在开始解题吧。
描述七：定位 - fixed
固定定位是由绝对定位衍生出来的，不同之处在于，固定定位元素的父级始终是视口。因此固定定位可以用来创建始终停留在窗口相同位置的元素。比如：固定侧栏、固定顶栏等。这样方便用户，不必再费事寻找栏目。
现在给"nav"盒子设置固定定位属性"position: fixed"、设置"top: 0"、设置自定义宽度、背景颜色。此时滑动滚轮，可以发现"nav"盒子始终固定在页面的最上方。但是，数字1却被覆盖了。由于固定定位的盒子不在流中，所以遮盖住了下方的元素。此时再给"section"盒子设置上外边距为1rem，此时1数字正常出现了。固定定位需要注意下方是否有元素被遮挡。
根据题目所示是对固定定位知识的考查，如果不清楚固定定位的可以看一下我对固定定位讲解的文章，上面已经给出链接，那么现在开始解题吧。
描述八：定位 - fixed - 广告
固定定位不仅可以用于导航栏目，还可以用于控制中心、广告、重要提示内容等。本节使用固定定位实现一个广告牌功能，关闭按钮和该按钮的功能已给出，当点击按钮时，广告牌会消失。现在给类名为"advert"的盒子设置固定定位属性"position: fixed"、设置"right: 0"、设置"bottom: 0"，此时广告牌的位置被固定在了视口的右下方。现在还需要将关闭按钮定位在广告牌的右上方，继续给类名为"x"的按钮盒子设置绝对定位属性"position: absolute"、设置"right: 0"，观察按钮的位置，已经被定位在了广告牌的右上方。一个简易的广告牌就设计完成了。
根据题目所示是对固定定位知识的考查，如果不清楚固定定位的可以看一下我对固定定位讲解的文章，上面已经给出链接，那么现在开始解题吧。附上代码
<html><head><metacharset=utf-8><styletype="text/css"> * { margin: 0; padding: 0; } .advert { width: 300px; height: 200px; background-color: black; position:fixed; right:0; bottom:0; } .advert:first-line { color: white; } .x{ position:absolute; right:0; } </style></head><body><sectionclass="advert"> 广告文案 <buttonclass="x">x</button></section><script>document.querySelector('button').onclick=function() { this.parentNode.style.display='none' } </script></body></html>
