实际定位示例

¥A tabbed info-box

我们将看到的第一个例子是一个经典的选项卡式信息框 - 当你想要将大量信息打包到一个小区域时，这是一个非常常见的功能。这包括战略/战争游戏等信息量大的应用、屏幕狭窄且空间有限的网站移动版本，以及你可能希望提供大量信息但又不想填满整个 UI 的紧凑信息框。完成后，我们的简单示例将如下所示：

¥The first example we'll look at is a classic tabbed info box — a very common feature used when you want to pack a lot of information into a small area. This includes information-heavy apps like strategy/war games, mobile versions of websites where the screen is narrow and space is limited, and compact information boxes where you might want to make lots of information available without having it fill the whole UI. Our simple example will look like this once we are finished:

注意：你可以看到已完成的示例在 info-box.html (源代码) 实时运行。检查一下以了解你将在本文的这一部分中构建什么。

¥Note: You can see the finished example running live at info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

你可能会想 "为什么不直接将单独的选项卡创建为单独的网页，然后让选项卡单击进入单独的页面来创建效果？" 这段代码会更简单，是的，但是每个单独的 "page" 视图实际上都是一个新加载的网页，这将使跨视图保存信息以及将此功能集成到更大的 UI 设计中变得更加困难。

¥You might be thinking "why not just create the separate tabs as separate webpages, and just have the tabs clicking through to the separate pages to create the effect?" This code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save information across views, and integrate this feature into a larger UI design.

首先，我们希望你制作起始 HTML 文件 — info-box-start.html.html 的本地副本。将其保存在本地计算机上合适的位置，然后在文本编辑器中打开它。让我们看看正文中包含的 HTML：

¥To start with, we'd like you to make a local copy of the starting HTML file — info-box-start.html. Save this somewhere sensible on your local computer, and open it up in your text editor. Let's look at the HTML contained within the body:

<section class="info-box">
  <ul>
    <li><a href="#" class="active-tab">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>
  <div class="panels">
    <article class="active-panel">
      <h2>The first tab</h2>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum
        et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius
        libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt
        metus. Donec ultrices, urna maximus consequat aliquet, dui neque
        eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor
        urna. Nulla facilisi.
      </p>
    </article>
    <article>
      <h2>The second tab</h2>

      <p>
        This tab hasn't got any Lorem Ipsum in it. But the content isn't very
        exciting all the same.
      </p>
    </article>
    <article>
      <h2>The third tab</h2>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an
        ordered list: how exciting!
      </p>

      <ol>
        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
        <li>Aliquam ut porttitor urna.</li>
        <li>Nulla facilisi</li>
      </ol>
    </article>
  </div>
</section>

所以这里我们有一个 <section> 元素，其中 class 为 info-box，其中包含 <ul> 和 <div>。无序列表包含三个列表项，其中包含链接，这将成为单击以显示内容面板的实际选项卡。div 包含三个 <article> 元素，它们将构成与每个选项卡对应的内容面板。每个面板都包含一些示例内容。

¥So here we've got a <section> element with a class of info-box, which contains a <ul> and a <div>. The unordered list contains three list items with links inside, which will become the actual tabs to click on for displaying our content panels. The div contains three <article> elements, which will make up the content panels that correspond to each tab. Each panel contains some sample content.

这里的想法是，我们将选项卡的样式设置为看起来像标准水平导航菜单，并使用绝对定位将面板设置为彼此叠置。我们还将为你提供一些 JavaScript，以便在你的页面上包含一些 JavaScript，以便在按下选项卡时显示相应的面板，并设置选项卡本身的样式。在这个阶段你不需要理解 JavaScript 本身，但你应该考虑尽快学习一些基本的 JavaScript ——你的 UI 功能越复杂，你就越有可能需要一些 JavaScript 来实现 你想要的功能。

¥The idea here is that we will style the tabs to look like a standard horizontal navigation menu, and style the panels to sit on top of one another using absolute positioning. We'll also give you a bit of JavaScript to include on your page to display the corresponding panel when a tab is pressed, and style the tab itself. You won't need to understand the JavaScript itself at this stage, but you should think about learning some basic JavaScript as soon as possible — the more complex your UI features become, the more likely it is that you'll need some JavaScript to implement your desired functionality.

¥General setup

首先，在开始和结束 <style> 标记之间添加以下内容：

¥To begin with, add the following between your opening and closing <style> tags:

html {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

这只是一些常规设置，用于在我们的页面上设置无衬线字体，使用 border-box box-sizing 模型，并摆脱默认的 <body> 边距。

¥This is just some general setup to set a sans-serif font on our page, use the border-box box-sizing model, and get rid of the default <body> margin.

接下来，在之前的 CSS 下方添加以下内容：

¥Next, add the following just below your previous CSS:

.info-box {
  width: 450px;
  height: 400px;
  margin: 0 auto;
}

这会在内容上设置特定的宽度和高度，并使用旧的 margin: 0 auto 技巧将其在屏幕上居中。在课程之前，我们建议尽可能不要在内容容器上设置固定高度；在这种情况下没关系，因为我们的选项卡中有固定的内容。在不同高度设置不同的标签看起来也有点不和谐。

¥This sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick. Previously in the course we advised against setting a fixed height on content containers if at all possible; it is OK in this circumstance because we have fixed content in our tabs. It also looks a bit jarring to have different tabs at different heights.

¥Styling our tabs

现在我们想要将选项卡样式设置为看起来像选项卡 - 基本上，这些是一个水平导航菜单，但不是像我们之前在课程中看到的那样在单击它们时加载不同的网页，而是导致在上面显示不同的面板 同一页面。首先，在 CSS 底部添加以下规则，从无序列表中删除默认的 padding-left 和 margin-top：

¥Now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. First, add the following rule at the bottom of your CSS to remove the default padding-left and margin-top from the unordered list:

.info-box ul {
  padding-left: 0;
  margin-top: 0;
}

注意：在整个示例中，我们在链的开头使用 .info-box 的后代选择器 - 这样我们就可以将此功能插入到已有其他内容的页面中，而不必担心干扰应用于页面其他部分的样式 。

¥Note: We are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.

接下来，我们将设置水平选项卡的样式 - 列表项全部向左浮动，使它们排成一行，它们的 list-style-type 设置为 none 以消除项目符号，它们的 width 设置为 150px，以便它们可以轻松地 适合整个信息框。<a> 元素设置为 display inline-block，因此它们将排成一行，但仍可设置样式，并且使用各种其他属性，为选项卡按钮设置适当的样式。

¥Next, we'll style the horizontal tabs — the list items are all floated left to make them sit in a line together, their list-style-type is set to none to get rid of the bullets, and their width is set to 150px so they will comfortably fit across the info-box. The <a> elements are set to display inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties.

添加以下 CSS：

¥Add the following CSS:

.info-box li {
  float: left;
  list-style-type: none;
  width: 150px;
}

.info-box li a {
  display: inline-block;
  text-decoration: none;
  width: 100%;
  line-height: 3;
  background-color: red;
  color: black;
  text-align: center;
}

最后，在本节中，我们将在链接状态上设置一些样式。首先，我们将设置选项卡的 :focus 和 :hover 状态，使其在聚焦/悬停时看起来不同，为用户提供一些视觉反馈。其次，我们将设置一条规则，当某个选项卡上存在 class 或 active-tab 时，该规则会在其中一个选项卡上放置相同的样式。单击选项卡时，我们将使用 JavaScript 进行设置。将以下 CSS 放置在其他样式下方：

¥Finally for this section we'll set some styles on the link states. First, we'll set the :focus and :hover states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a class of active-tab is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:

.info-box li a:focus,
.info-box li a:hover {
  background-color: #a60000;
  color: white;
}

.info-box li a.active-tab {
  background-color: #a60000;
  color: white;
}

¥Styling the panels

下一个工作是设计面板的样式。我们走吧！

¥The next job is to style our panels. Let's get going!

首先，添加以下规则来设置 .panels <div> 容器的样式。这里我们设置一个固定的 height 以确保面板紧贴信息框内，position relative 将 <div> 设置为定位上下文，这样你就可以相对于它而不是初始视口放置定位的子元素，最后我们 clear 在上面的 CSS 中设置了浮动，这样它就不会干扰布局的其余部分。

¥First, of all, add the following rule to style the .panels <div> container. Here we set a fixed height to make sure the panels fit snugly inside the info-box, position relative to set the <div> as the positioning context, so you can then place positioned child elements relative to it and not the initial viewport, and finally we clear the float set in the CSS above so that it doesn't interfere with the remainder of the layout.

.info-box .panels {
  height: 352px;
  position: relative;
  clear: both;
}

最后，在本节中，我们将为构成面板的各个 <article> 元素设置样式。我们要添加的第一条规则绝对是 position 面板，并使它们全部与 <div> 容器的 top 和 left 齐平 — 这部分绝对是整个布局功能的关键，因为它使面板位于一个面板的顶部 其他。该规则还为面板提供了与容器相同的设置高度，并为内容提供了一些填充、文本 color 和 background-color。

¥Finally for this section, we will style the individual <article> elements that comprise our panels. The first rule we'll add will absolutely position the panels, and make them all sit flush to the top and left of their <div> container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text color, and a background-color.

我们将在此处添加的第二条规则使得设置了 class 或 active-panel 的面板将应用 z-index 为 1，这将使其位于其他面板之上（定位元素的 z-index 为 0） 默认，这会将它们放在下面）。同样，我们将在适当的时候使用 JavaScript 添加此类。

¥The second rule we'll add here makes it so that a panel with a class of active-panel set on it will have a z-index of 1 applied to it, which will make it sit above the other panels (positioned elements have a z-index of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.

.info-box article {
  position: absolute;
  top: 0;
  left: 0;
  height: 352px;
  padding: 10px;
  color: white;
  background-color: #a60000;
}

.info-box .active-panel {
  z-index: 1;
}

¥Adding our JavaScript

让此功能发挥作用的最后一步是添加一些 JavaScript。将以下代码块完全按照在开始和结束 <script> 标记之间写入的方式放置（你可以在 HTML 内容下方找到这些代码）：

¥The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing <script> tags (you'll find these below the HTML content):

const tabs = document.querySelectorAll(".info-box li a");
const panels = document.querySelectorAll(".info-box article");

for (let i = 0; i < tabs.length; i++) {
  setTabHandler(tabs[i], i);
}

function setTabHandler(tab, tabPos) {
  tab.onclick = () => {
    for (const tab of tabs) {
      tab.className = "";
    }

    tab.className = "active-tab";

    for (const panel of panels) {
      panel.className = "";
    }

    panels[tabPos].className = "active-panel";
  };
}

该代码执行以下操作：

¥This code does the following:

• 首先，我们将对所有选项卡和所有面板的引用保存在两个名为 tabs 和 panels 的变量中，以便稍后我们可以轻松地对它们进行操作。
• 然后，我们使用 for 循环循环遍历所有选项卡，并在每个选项卡上运行一个名为 setTabHandler() 的函数，该函数设置单击每个选项卡时应发生的功能。运行时，该函数会传递一个对其正在运行的特定选项卡的引用，以及一个标识该选项卡在 tabs 数组中位置的索引号 i。
• 在 setTabHandler() 函数中，选项卡上设置了 onclick 事件处理程序，因此当单击选项卡时，会发生以下情况：
  • for 循环用于循环遍历所有选项卡并删除其中存在的任何类。
  • 在单击的选项卡上设置了 class 或 active-tab — 请记住，该类在 CSS 中有一个关联规则，该规则在选项卡上设置与面板样式相同的 color 和 background-color。
  • for 循环用于循环遍历所有面板并删除其中存在的任何类。
  • 在与单击的选项卡相对应的面板上设置了 active-panel 类 - 请记住，该类在 CSS 中有一个关联规则，将其 z-index 设置为 1，使其显示在其他面板的顶部。

第一个例子就是这样。保持代码开放，因为我们将在第二个代码中添加它。

¥That's it for the first example. Keep your code open, as we'll be adding to it in the second one.

¥A fixed position tabbed info-box

在第二个示例中，我们将采用第一个示例 - 我们的信息框 - 并将其添加到完整网页的上下文中。但不仅如此 - 我们将给它固定的位置，以便它在浏览器窗口中保持在相同的位置。当主要内容滚动时，信息框将保持在屏幕上的相同位置。我们完成的示例将如下所示：

¥In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:

注意：你可以看到已完成的示例在 fixed-info-box.html (源代码) 实时运行。检查一下以了解你将在本文的这一部分中构建什么。

¥Note: You can see the finished example running live at fixed-info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

作为起点，你可以使用本文第一部分中已完成的示例，或者从我们的 GitHub 存储库制作 info-box.html 的本地副本。

¥As a starting point, you can use your completed example from the first section of the article, or make a local copy of info-box.html from our GitHub repo.

¥HTML additions

首先，我们需要一些额外的 HTML 来表示网站的主要内容。在起始 <body> 标签下方、现有部分之前添加以下 <section>：

¥First of all, we need some additional HTML to represent the website main content. Add the following <section> just below your opening <body> tag, just before the existing section:

<section class="fake-content">
  <h1>Fake content</h1>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
</section>

注意：如果你愿意，可以随意将虚假内容更改为真实内容。

¥Note: You can feel free to change the fake content for some real content if you like.

¥Changes to the existing CSS

接下来我们需要对现有的 CSS 进行一些小的更改，以放置和定位信息框。更改 .info-box 规则以摆脱 margin: 0 auto;（我们不再希望信息框居中），添加 position: fixed;，并将其粘贴到浏览器视口的 top。

¥Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your .info-box rule to get rid of margin: 0 auto; (we no longer want the info-box centered), add position: fixed;, and stick it to the top of the browser viewport.

现在它应该看起来像这样：

¥It should now look like this:

.info-box {
  width: 450px;
  height: 400px;
  position: fixed;
  top: 0;
}

¥Styling the main content

此示例唯一剩下的就是为主要内容提供一些样式。在 CSS 的其余部分下面添加以下规则：

¥The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:

.fake-content {
  background-color: #a60000;
  color: white;
  padding: 10px;
  height: 2000px;
  margin-left: 470px;
}

首先，我们为内容指定与信息框面板相同的 background-color、color 和 padding。然后，我们给它一个大的 margin-left，将其移到右侧，为信息框留出空间，这样它就不会与其他任何内容重叠。

¥To start with, we give the content the same background-color, color, and padding as the info-box panels. We then give it a large margin-left to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.

这标志着第二个例子的结束；我们希望你会发现第三个同样有趣。

¥This marks the end of the second example; we hope you'll find the third just as interesting.

¥A sliding hidden panel

我们将在这里展示的最后一个示例是一个面板，按下图标即可在屏幕上滑入和滑出 - 如前所述，这在移动布局等情况下很受欢迎，其中可用的屏幕空间很小，因此你不需要 不想通过显示菜单或信息面板而不是有用的内容来使用大部分内容。

¥The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.

我们完成的示例将如下所示：

¥Our finished example will look like this:

注意：你可以看到已完成的示例在 hidden-info-panel.html (源代码) 实时运行。检查一下以了解你将在本文的这一部分中构建什么。

¥Note: You can see the finished example running live at hidden-info-panel.html (source code). Check it out to get an idea of what you will be building in this section of the article.

首先，从我们的 GitHub 存储库制作 hidden-info-panel-start.html 的本地副本。这不是上一个示例的延续，因此需要一个新的启动文件。让我们看一下文件中的 HTML：

¥As a starting point, make a local copy of hidden-info-panel-start.html from our GitHub repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:

<label for="toggle">❔</label>
<input type="checkbox" id="toggle" />
<aside>

…

</aside>

首先，我们有一个 <label> 元素和一个 <input> 元素 - <label> 元素通常用于将文本标签与表单元素关联起来，以实现可访问性（允许屏幕用户查看什么描述与什么表单元素相关）。此处它使用 for 和 id 属性与 <input> 复选框关联。

¥To start with here we've got a <label> element and an <input> element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the <input> checkbox using the for and id attributes.

注意：我们在 HTML 中放入了一个特殊的问号字符作为信息图标 - 这代表按下该按钮即可显示/隐藏面板。

¥Note: We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.

在这里，我们将使用这些元素来实现稍微不同的目的 - <label> 元素的另一个有用的副作用是你可以单击复选框的标签来选中该复选框，以及仅选中该复选框本身。这导致了著名的 复选框黑客，它提供了一种通过切换按钮来控制元素的无 JavaScript 方式。我们要控制的元素是其他两个元素后面的 <aside> 元素（为了简洁起见，我们将其内容从上面的代码列表中删除）。

¥Here we are going to use these elements for a slightly different purpose — another useful side effect of <label> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known checkbox hack, which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the <aside> element that follows the other two (we've left its contents out of the above code listing for brevity).

在下面的部分中，我们将解释这一切是如何工作的。

¥In the below sections we'll explain how this all works.

¥Styling the form elements

首先让我们处理表单元素 - 在 <style> 标签之间添加以下 CSS：

¥First let's deal with the form elements — add the following CSS in between your <style> tags:

label[for="toggle"] {
  font-size: 3rem;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
  cursor: pointer;
}

input[type="checkbox"] {
  position: absolute;
  top: -100px;
}

第一条规则设计 <label>；在这里我们有：

¥The first rule styles the <label>; here we've:

• 设置一个大的 font-size，使图标又好看又大。
• 将 position absolute 设置在其上，并使用 top 和 right 将其很好地放置在右上角。
• 将 z-index 设置为 1 — 这样，当设置信息面板的样式并显示时，它不会遮盖图标；相反，该图标将位于其顶部，因此可以再次按下该图标来隐藏信息窗格。
• 使用 cursor 属性将鼠标光标悬停在图标上时更改为手形指针（就像你在链接悬停时看到的指针一样），作为向用户提供额外的视觉线索，表明该图标做了一些有趣的事情。

第二条规则在实际复选框 <input> 元素上设置 position absolute，并将其隐藏在屏幕顶部。我们实际上不想在用户界面上看到这种情况。

¥The second rule sets position absolute on the actual checkbox <input> element, and hides it off the top of the screen. We don't actually want to see this on our UI.

¥Styling the panel

现在是时候设计实际滑动面板本身的样式了。将以下规则添加到 CSS 底部：

¥Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:

aside {
  background-color: #a60000;
  color: white;

  width: 340px;
  height: 100%;
  padding: 0 20px;

  position: fixed;
  top: 0;
  right: -370px;

  transition: 0.6s all;
}

这里发生了很多事情 - 让我们一点一点地讨论一下：

¥There's a lot going on here — let's discuss it bit by bit:

• 首先，我们在信息框上设置一些简单的 background-color 和 color。
• 接下来，我们在面板上设置一个固定的 width，并使其 height 成为浏览器视口的整个高度。
• 我们还添加了一些水平 padding 来将其间隔开一点。
• 接下来，我们在面板上设置 position: fixed;，这样即使页面有要滚动的内容，它也会始终出现在同一位置。我们将其粘贴到视口的 top 上，并将其设置为默认情况下它位于 right 的屏幕外。
• 最后，我们在元素上设置 transition。转换是一个有趣的功能，它允许你在状态之间平滑地进行更改，而不是突然进入 "on"、"off"。在本例中，我们打算在选中复选框时使面板在屏幕上平滑滑动。（或者换句话说，当单击问号图标时 - 请记住，单击 <label> 将选中关联的复选框！我们告诉过你这是一次黑客攻击。）你将学到更多关于……

¥Setting the checked state

最后需要添加一点 CSS — 将以下内容放在 CSS 底部：

¥There is one final bit of CSS to add — put the following at the bottom of your CSS:

input[type="checkbox"]:checked + aside {
  right: 0px;
}

这里的选择器非常复杂 - 我们选择与 <input> 元素相邻的 <aside> 元素，但仅在选中它时才选择（请注意使用 :checked 伪类来实现此目的）。在这种情况下，我们将 <aside> 的 right 属性设置为 0px，这会导致面板再次出现在屏幕上（由于过渡而平滑）。再次单击标签将取消选中该复选框，从而再次隐藏面板。

¥The selector is pretty complex here — we are selecting the <aside> element adjacent to the <input> element, but only when it is checked (note the use of the :checked pseudo-class to achieve this). When this is the case, we are setting the right property of the <aside> to 0px, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.

现在你已经知道了 - 一种相当聪明的、无需 JavaScript 的方法来创建切换按钮效果。这种效果确实有一些问题 - 这有点滥用表单元素，因为它们不是为此目的而设计的。另外，在可访问性方面效果并不大；默认情况下，标签不可聚焦，并且表单元素的非语义使用可能会导致屏幕阅读器出现问题。JavaScript 和链接或按钮可能更合适，但尝试起来仍然很有趣。

¥So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.

¥Summary

这样我们对定位的看法就圆满了 - 现在，你应该了解基原生制是如何工作的，并了解如何开始应用这些机制来构建一些有趣的 UI 功能。如果你没有立即明白这一切，请不要担心 - 定位是一个相当高级的主题，你随时可以再次阅读这些文章来帮助你理解。

¥So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to build some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding.