一、定位体系的基本框架

要理解相对定位，首先需要将其置于CSS的完整定位体系中考察。CSS定位模型包含四种基本模式：静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。每种定位模式都代表着元素在文档流中不同的行为逻辑和空间关系。

静态定位是元素的默认状态，遵循标准的文档流布局规则。而相对定位的核心特性在于它创造了一种“双重存在”的状态——元素既保留了在原始文档流中的位置和空间占用，又在视觉呈现层面获得了位置偏移的能力。这种看似矛盾的特性，正是相对定位设计精妙之处。

---

二、相对定位的核心工作机制

空间占位的持续性‌

当为一个元素设置position: relative时，浏览器渲染引擎会执行一个关键操作：在计算文档流布局时，仍然按照该元素未偏移前的原始位置为其分配空间。这意味着，无论你通过top、right、bottom、left属性将该元素的视觉外观移动到什么位置，它在文档流中原来占据的那个“空位”依然被保留着。

这种机制产生了重要的布局效果：周围的兄弟元素在排列时，会忽略该元素视觉上的新位置，仍然与其原始占位空间进行定位计算。这就解释了为什么移动一个相对定位元素不会导致其他元素重新排列来填补“空白”。

偏移计算的参考系‌

相对定位的偏移属性（top、right、bottom、left）的计算方式极具特色。它们不是相对于父元素、视口或其他外部参考系，而是严格相对于该元素自身在标准文档流中本应占据的位置。

具体来说，当设置top: 20px时，意味着“将元素的视觉表现从其原始位置向下移动20像素”。同理，left: 30px表示“从原始位置向右移动30像素”。这种“自我参照”的特性使得相对定位特别适合进行精细的微调，因为开发者可以准确预测移动后的位置效果。

层叠上下文的创建‌

一个常被忽视但极为重要的特性是：只要为元素设置了position: relative（即使没有指定任何偏移值），该元素就会自动创建一个新的层叠上下文。

层叠上下文决定了元素在z轴方向上的堆叠顺序。在这个新的上下文内部，子元素的z-index值只在该上下文内有效，不会与外部元素的z-index产生冲突。这一特性在构建复杂UI组件时尤为重要，因为它允许开发者控制局部区域的层叠关系，而不影响全局的层叠秩序。

---

三、视觉表现与布局计算的解耦

相对定位最革命性的设计在于它将“视觉表现”与“布局计算”这两个在传统排版中紧密耦合的概念进行了解耦。

在布局计算阶段，浏览器仍然将相对定位元素视为静态定位元素，照常参与流式布局、浮动清理、margin折叠等所有标准布局流程。所有兄弟元素的位置计算都基于这个“虚拟的原始元素”进行。

只有在渲染绘制阶段，浏览器才会应用偏移变换，将元素的视觉表现移动到新位置。这种两阶段处理机制确保了文档流的稳定性，同时提供了视觉调整的灵活性。

---

四、相对定位的典型应用场景

精细布局微调‌

在响应式设计中，相对定位成为弥补媒体查询“断点”之间过渡不连续的理想工具。当某个元素在不同屏幕尺寸下需要微小位置调整，但又不足以 warrant 一个完整的布局重构时，相对定位提供了精准的解决方案。

作为绝对定位的锚点‌

这是相对定位最具战略价值的应用。当父元素设置为position: relative而子元素设置为position: absolute时，子元素的定位不再相对于视口或整个文档，而是相对于这个父元素。这种组合创建了一种“局部绝对定位”的范式，极大地提升了复杂组件布局的可控性和可维护性。

创建视觉层次‌
通过微小的z-index配合微小的位置偏移，相对定位可以在不破坏整体布局的前提下创建细腻的视觉深度。例如，给按钮添加轻微的向上偏移和阴影，可以模拟“浮起”的立体效果，而这一切都在保持文档流完整性的前提下实现。

---

五、相对定位的渲染性能考量

从浏览器渲染管线的角度分析，相对定位触发的重绘和重排范围是有限的。由于文档流结构没有改变，浏览器通常只需要重新计算受影响元素的视觉表现，而不需要重新计算整个布局树。这种局部性的更新机制使得相对定位在性能上比那些导致全局重新布局的定位方式更加友好。

import React from 'react';
import { View, Text, Dimensions, StyleSheet, Image, TextInput, AppRegistry } from 'react-native';
 
//获取屏幕的宽高
const screenWidth =Math.round( Dimensions.get('window').width);
const screenHight =Math.round( Dimensions.get('window').height);

const AppStyles = StyleSheet.create({
  wrap: {
    width: '100%',
    height: screenHight,
    backgroundColor: '#85BDFF'
  },
  title: {
    width: '100%',
    height: 72,
    fontFamily: 'OPPOSans, OPPOSans',
    fontWeight: 'normal',
    paddingTop: 50,
    fontSize: 36,
    color: '#304057',
    lineHeight: 72,
    textAlign: 'center',
    fontStyle: 'normal'
  },
  banner: {
    paddingTop: 50,
    paddingRight: 32,
    paddingLeft: 32,
  },
  bannerItem: {
    paddingTop: 10,
    display: 'flex',
    flexDirection:'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '50%',
  },
  loginBox: {
    width: '100%',
    paddingTop: 29,
    paddingLeft: 20,
    paddingRight: 20,
    borderTopRightRadius: 30,
    borderTopLeftRadius: 30,
    backgroundColor: '#F2F8FF',
    flex: 1
  },
  loginBoxCode: {
    marginTop: 20,
    position: 'relative',
    width: '100%',
  },
  loginBoxCodeBtn: {
    position: 'absolute',
    right: 4,
    top: 4,
    width: 110,
    height: 40,
    lineHeight: 40,
    borderRadius: 10,
    backgroundColor: '#1669E3',
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 14,
    color: '#FFFFFF',
  }
})
function App() {
  const [phone, onChangePhone] = React.useState('');
  const [code, onChangeCode] = React.useState('');

  return (
    <View style={AppStyles.wrap}>
      <Text style={AppStyles.title}>鸿蒙ReactNative系统</Text>
      <View style={AppStyles.banner}>
        <View style={{display:'flex',flexDirection:'row',justifyContent:'space-between'}}>
          <View style={AppStyles.bannerItem}>
            <Image style={{width:27,height:27}} source={require('./images/checked.png')}></Image>
            <Text style={{paddingLeft: 4}}>实时业绩便捷查询</Text>
          </View>
          <View style={AppStyles.bannerItem}>
            <Image style={{width:27,height:27}} source={require('./images/checked.png')}></Image>
            <Text style={{paddingLeft: 4}}>订单状态轻松把控</Text>
          </View>
        </View>
        <View style={{display:'flex',flexDirection:'row',justifyContent:'space-between'}}>
          <View style={AppStyles.bannerItem}>
            <Image style={{width:27,height:27}} source={require('./images/checked.png')}></Image>
            <Text style={{paddingLeft: 4}}>宣传数据全程管理</Text>
          </View>
          <View style={AppStyles.bannerItem}>
            <Image style={{width:27,height:27}} source={require('./images/checked.png')}></Image>
            <Text style={{paddingLeft: 4}}>海量素材一站转发</Text>
          </View>
        </View>
      </View>

      <Image style={{width:289, height: 182, display: 'flex', alignSelf: 'center', margin: 20}} source={require('./images/login-bg.png')}></Image>

      <View style={AppStyles.loginBox}>
        <TextInput style={{width: '100%', height: 48, borderRadius: 10, backgroundColor: '#FFFFFF', paddingLeft: 16, paddingRight: 16, fontSize: 14, color: '#304057'}}
         placeholder="请输入手机号" onChangeText={onChangePhone} value={phone}></TextInput>

         <View style={AppStyles.loginBoxCode}>
          <TextInput style={{width: '100%', height: 48, borderRadius: 10, backgroundColor: '#FFFFFF', paddingLeft: 16, paddingRight: 16, fontSize: 14, color: '#304057'}}
         placeholder="请输入验证码" onChangeText={onChangeCode} value={code}></TextInput>
          <Text style={AppStyles.loginBoxCodeBtn}>获取验证码</Text>
         </View>
      </View>
    </View>
  );
}
 
export default App;

以下代码中包含loginBoxCode是一个大盒子，里面包含2个小盒子，一个是textinput，一个是text，在里面是使用的相对定位来处理验证码的text盒子。

这里可以看到首先大盒子使用postion: relative来进行父级的申请，验证码的text盒子则设置为postion:absolute来进行父级的盒子相对进行定位。

经过打包后，我们可以看到右边的效果，确实已经理行的相对定位的处理了。

总结：

父元素要有定位，将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。