.svg){kind=icon}
.svg){kind=icon}
什么是
Pos.
在网页设计领域，了解层叠样式表（CSS）的基础知识至关重要。在构成 CSS 的这些核心概念中，"位置 "是一个重要概念。位置 "涉及元素与其他元素的位置关系，以及它们在网页上的相对位置。
位置可用于在元素或元素组内安排文本、列、行或任何类型的内容。它可以保证布局的准确性，并使网页的不同部分在多个分辨率和平台上保持视觉上的一致性。定位还能确保在手机、电脑和平板电脑等不同设备上浏览时，项目的所有部分都保持在各自的位置上；这就是所谓的响应式设计。
通过在 CSS 代码中使用适当的定位技术，开发人员能够创建图形图像，并在部署到生产环境时准确复制其预期外观，而无需考虑访问者在网站首页渲染时使用的设备上显示的位置。
想想房地产，就有助于理解位置：元素都有一定的边界，就像县级分区法测量地块一样--左上角是 "地产线 A"，右下角是 "地产线 B"。从本质上讲，与定位相关的一切工作都围绕着确保一旦资源铺设妥当，就不会有任何东西开始重叠到其他东西的空间；它实际上与宇宙学有很好的关联，因为设计师在网站页面上绘制图形块之间的相对位置时，会借鉴万有引力等普遍的物理定律（只是不要在这里说 "隐喻"）。
实例
Pos.
- 绝对定位
- 相对定位
- 固定定位
- 静态定位
- 浮动属性
- 箱式模型
- Z-index 属性
- 偏移特性
- 溢出特性
- 可见性属性
的好处
Pos.
- 使用 "position: relative（位置：相对）"可以创建相对于正常位置移动元素和调整图层的能力，使网页设计人员和开发人员能够更精确地操作页面文档。
- 使用 "position: absolute"（位置：绝对），你可以将元素完全从文档流中移出，比如在创建菜单和子菜单时，它们不会干扰周围的元素或同一网站上的其他文本。
- CSS 声明 "position: fixed; "非常适合在滚动过程中让元素保持原位，在任何设备上都能创造出美观流畅的体验。
甜蜜的事实与统计
- 位置是 CSS 最重要的方面之一；它有助于定义元素在网页上的位置。
- position 属性定义了一个元素相对于其父元素或页面上其他元素的位置。
- 位置有四种值：静态、相对、绝对和固定。
- 结合使用 margin 和 padding 属性可以调整元素之间的距离。
- 如果网页两边或各部分之间需要留白，也可以使用页边距来留白，而不是仅仅依靠填充。
- 具有绝对定位功能的元素会保持在文档流中的初始位置，而不会受到相邻内容的影响。
- 浮动元素会一直沿着页面的左侧或右侧边缘移动，直到到达某个父容器，这样就可以在整个设计布局中灵活运用，而不会占用单元格/列等可用空间之外的额外空间。
- CSS z-index 属性可控制使用绝对定位技术（如相对框、柔性容器、网格等）定位的项目之间的分层和重叠层次。
- 在处理图层管理（尤其是旧版浏览器）时，必须考虑到跨浏览器兼容性问题。 例如，Internet Explorer 6 无法正确支持 z 索引，因此，如果需要适应这些版本的情况，设计层需要优雅地脱落，并在浏览器功能允许的情况下引入渐进式增强功能！
- 变换（转场和 2D/3D 转场）等动画在很大程度上依赖于已定义的位置数据点，只需使用最少的代码就能添加出色的交互行为！
- 即使是宇宙学家，也会通过确定天文坐标和遥远星系的位置来计算位置，这让我们意识到，无论我们离家有多近，"位置 "真的很重要！
的演变
Pos.
定位是 CSS 世界的一个重要组成部分，这个术语从设计布局开始使用代码创建时就已经存在了。随着浏览器越来越好，语法越来越复杂，它的重要性也与日俱增。让我们来看看它的历史、演变和未来发展。
这一切都源于网页设计者在页面元素布局方面需要比基本 HTML 更强的控制能力。position 属性被引入后，单个元素可以相对于其他元素或其父容器进行定位。除了传统的网格外，它还为设计人员提供了增加多样性和布局选项的方法，从而使复杂的设计变得更加生动。为了确定哪些值适用于某些类型的设计，人们进行了一些尝试，但很快人们就习惯了在样式表中使用 position:relative;，根本不需要考虑太多。
经过多次迭代，我们现在已经拥有了 Flexbox、网格模板和 Z-index 等先进技术--每一种技术都通过使用位置属性而得到了极大的改进，因为如今在大多数现代网络构建中都使用了位置属性。我们可能会认为，这意味着网站的定位功能从此将保持相对不变，但专家预测，未来会有一些令人兴奋的发展，带来更多创造性的可能性！看起来，柔性容器将因其简洁性而继续受到欢迎，而且它们还能帮助实现全宽列以及比以前更容易地包含全宽列--这意味着您将不再需要多个断点来实现全宽列！
此外，通过使用定位功能，还可以对 3D 变换进行调整；另外，由于我们神奇样式表中的智能定位技巧，浏览器还可以直接提供新的自定义动画选项。总而言之，如果您正在寻找为什么 "定位 "应该继续成为任何网站开发项目的一部分的理由，那么我们只能说，趋势表明我们今后会有很多机会！
