1 files changed, 70 insertions, 0 deletions
diff --git a/files/zh-cn/learn/css/css_layout/position_skills/index.html b/files/zh-cn/learn/css/css_layout/position_skills/index.html
new file mode 100644
index 0000000000..63c8a8f01a
--- /dev/null
+++ b/files/zh-cn/learn/css/css_layout/position_skills/index.html
@@ -0,0 +1,70 @@
+---
+title: 'Test your skills: position'
+slug: Learn/CSS/CSS_layout/Position_skills
+tags:
+  - Position
+  - 定位
+  - 布局
+translation_of: Learn/CSS/CSS_layout/Position_skills
+---
+<div></div>
+
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p>此任务的目的是让您使用在我们的position课程中介绍的CSS {{CSSxRef("position")}}属性以及对应值，您将通过两个小任务来复习刚才课程材料中介绍的不同元素。</p>
+
+<div class="blockIndicator note">
+<p><strong>小贴士</strong>: 您可以在下面的交互式编辑器中尝试解决方案，下载代码并使用在线工具（如CodePen、jsFiddle或Glitch）处理任务可能会有帮助。</p>
+
+<p>如果您遇到困难，请向我们寻求帮助-请参阅本页底部的 {{anch("Assessment or further help")}} 部分</p>
+</div>
+
+<h2 id="定位练习一">定位练习一</h2>
+
+<p>在这项任务中，您需要将目标类别为5px灰色边框的元素定位到外部容器的右上角。</p>
+
+<p><img alt="The green box is at the top right of a container with a grey border." src="https://mdn.mozillademos.org/files/17077/position-task1.png" style="height: 661px; width: 1033px;"></p>
+
+<p>尝试更改下面的代码示例，重新完成的上述任务：</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}</p>
+
+<p>作为一个额外的挑战，你能改变目标元素显示在文本下面吗？</p>
+
+<div class="blockIndicator note">
+<p>为了评估和进一步编辑,<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">下载源代码</a>在本地编辑器或在线编辑器中编辑</p>
+</div>
+
+<h2 id="定位练习二">定位练习二</h2>
+
+<p>在下面的示例中，滚动条滚动时侧边栏将随内容一起滚动。更改它使滚动条滚动时侧边栏保持原位并且只滚动内容。</p>
+
+<p><img alt="The content is scrolled but the sidebar has stayed in place." src="https://mdn.mozillademos.org/files/17078/position-task2.png" style="height: 827px; width: 1123px;"></p>
+
+<p>尝试更改下面的代码示例，重新完成的上述任务：</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator note">
+<p>为了评估和进一步编辑,<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">下载源代码</a>在本地编辑器或在线编辑器中编辑</p>
+</div>
+
+<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+
+<p>You can practice these examples in the Interactive Editors mentioned above.</p>
+
+<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
+
+<ol>
+ <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
+ <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include:
+  <ul>
+   <li>A descriptive title such as "Assessment wanted for Position skill test 1".</li>
+   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
+   <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
+   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
+  </ul>
+ </li>
+</ol>