t of the checkbox hack — the checked state */
input[type=checkbox]:checked + aside {
right: 0px;
}
</style>
</head>
<body>
<label for="toggle">?</label>
<input type="checkbox" id="toggle">
<aside>
<h2>Information</h2>
<p>Some very important information about your app:</p>
<ol>
<li>It has a really cool slide-out information box.</li>
<li>This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.</li>
<li>It also uses a cool technique called the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>.</li>
<li>This allows you to create a nice "toggle on/toggle off" UI effect without using any java script, which will work in IE9 and above (the smooth transition will work in IE10 and above.)</li>
</ol>
</aside>
</body>
</html>
gif效果图：
总结
这样完成了我们对定位的关注——现在，你应该理解基本机制的工作原理，同样理解了怎样应用这些知识去构建一些有趣的用户界面功能，不要由于你还未完全理解所有的知识而担心——定位是一个相当高级的话题，你可以随时读这篇文章来帮助你的理解。下一个主题我们将转向Flexbox。
【end】