在响应式设计中，网页的布局和元素的位置不仅受到屏幕尺寸的限制，还受到设备方向的影响。为了让网页在各种设备上都有良好的展示效果，必须采用一些技术手段实现元素的精确定位。而 position 属性就是其中非常重要的一种。
1. position 属性的基本用法
在 CSS 中，position 属性指定了元素在文档中的摆放位置，它有以下几个常用取值：
- static：默认值，表示元素的位置由文档流决定，不能进行自由定位。
- absolute：表示元素定位在父级元素的位置上，与其他元素的位置无关。
- relative：表示元素的定位基准是其在正常文档流中的位置，可以自由调整其位置。
- fixed：表示元素的位置相对于浏览器窗口是固定的，不受滚动条的影响。
- sticky：表示元素在滚动过程中会停留在某个位置上，类似 position:fixed 和 position:relative 的混合。
在响应式设计中，可以采用 position 属性实现元素的定位和移动，使页面更加灵活多样。
2. position 属性的高级应用
除了基本的定位功能外，position 属性还可以配合其他 CSS 属性实现更加强大的功能。
2.1 实现元素的垂直居中
在常规布局中，元素的垂直居中通常需要使用 JavaScript 手动计算元素的高度和上下边距，比较繁琐。而在响应式设计中，可以采用 position 属性和 top、bottom、left、right 属性实现元素的垂直居中。
例如，下面的 HTML 代码和 CSS 样式可以实现一个垂直居中的 div，当窗口大小改变时，仍然可以保持居中位置不变：
---- ------------- ---- --------------------- ------
----- - ------- ------ --------- --------- ----------------- -------- - ------- - ------ ------ ------- ------ ----------------- ----- --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -
上述代码中，.main 是一个占满整个屏幕的 div，它的子元素 .center 通过 position：absolute 和 top：50%、left：50% 实现了水平和垂直居中。而 transform：translate(-50%, -50%) 则是实现相对居中的核心代码。
2.2 实现悬浮效果
响应式设计中，悬浮效果可以让元素在特定条件下出现或隐藏。而 position 属性可以通过设置 z-index 属性实现元素的叠放效果，从而实现悬浮效果。
例如，下面的 HTML 代码和 CSS 样式可以实现一个鼠标悬浮时出现遮罩效果的 div：
---- ------------- ---- ------------------ ---- ------------------- ------
----- - --------- --------- ------ ------ ------- ------ - ---- - --------- --------- ------ ----- ------- ----- ----------------- ----- - ----- - --------- --------- ---- -- ----- -- -------- --- ------ ----- ------- ----- ----------------- ------- -- -- ----- -------- -- ----------- ------- ---- ------------ - ---------- ----- - -------- -- -
上述代码中，.main 是父级元素，使用 position：relative，.box 是子元素，使用 position：relative，它是页面中的主要内容。而 .mask 也是一个子元素，它使用 position：absolute定位在 .main 元素上，并且设置了 z-index 参数为 -1，这样它的位置就比 .box 低，就会被覆盖。在 hover 事件中，将 .mask 的 opacity 参数从 0 变成 1，就可以实现遮罩悬浮效果。
3. 总结
在响应式设计中，使用 position 属性可以实现元素的定位、垂直居中、悬浮效果等功能，这对于网页的布局和元素的精确定位非常重要。在使用 position 属性时，需要注意其基本用法和高级应用，灵活运用，才能达到最好的效果。
你可以在实际开发中尝试使用 position 属性来实现更加丰富多样的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e83929f6b2d6eab33b93c1