---
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/position2-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>