在 web 开发中，样式表是一个非常重要的组成部分。position 是一个常用的 CSS 属性，用于控制元素的定位。但是，手写 position 的样式表代码难以规范且繁琐，这时我们可以使用 npm 包 position.css 来快速简便地定位元素。在这篇文章中，我们将详细地介绍如何使用这个 npm 包以及如何去学习和使用它所提供的功能。
安装
安装就是最基础的操作，打开你的终端或者命令行工具，输入以下命令：
npm install position.css
这里假设你已经安装了 Node.js 和 npm，如果没有，请先安装。
安装完之后，在你的项目中，引入这个 npm 包：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ---------------------------------------------------
-------
------
---- ------------------------------------
-------
-------这里引入的是这个 npm 包的 CSS 文件，之后我们就可以在 HTML 元素中应用它提供的 class 了。
基本用法
position.css 这个 npm 包提供了一些非常基础的样式类，你可以在你的 HTML 元素中应用它们来控制元素的定位和布局。
相对定位 position-relative
<div class="position-relative"> 相对定位 </div>
position-relative 帮助我们把某个元素从它原本在文档流中的位置移动一定的距离，但是并不改变文档流中的元素布局。
绝对定位 position-absolute
<div class="position-relative">
<div class="position-absolute top-0 left-0">
绝对定位
</div>
</div>position-absolute 会把元素从文档流中移除，并放到某个比它更高级别的祖先元素中定位。top-0 left-0 表示元素距离祖先元素顶部和左边框均为 0。
固定定位 position-fixed
<div class="position-fixed top-0 left-0"> 固定定位 </div>
position-fixed 使元素相对于浏览器窗口左上角的位置固定。
粘性定位 position-sticky
<div class="position-sticky top-0 left-0"> 粘性定位 </div>
position-sticky 只会沿一个方向滚动，当元素到达指定位置（粘性定位元素与顶部的距离小于 or 等于 0）时，元素固定在这个位置。
拓展学习
以上只是 position.css 这个 npm 包中提供的一些基础的定位元素的样式类，实际上它还提供了很多有趣而且实用的针对具体细节的样式类，比如可以实现贴边对齐、可调节子元素间距、灵活的布局方式、自适应元素等等，这些功能有效的解决了前端开发中快速定位和布局的瓶颈。我们可以通过阅读官方文档和在项目中实践来学习并掌握这些技能。
官方文档：https://github.com/kripken/position.css/blob/master/README.md
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ---------------------------------------------------
-------
------
---- --------------------------
---- ------------------------ ----- --------
----
------
---- --------------------- ----- --------
----
------
---- ---------------------- ----- --------
----
------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e981e8991b448d791a