duilib绝对定位与相对定位

**DUILib绝对定位与相对定位**

在UI设计中，位置布局是非常重要的一部分。DUILib提供了两种基本的位置布局方式：绝对定位（Absolute Positioning）和相对定位（Relative Positioning）。这两种方式可以帮助我们实现复杂的UI布局。

**1. 绝对定位**

绝对定位是指将元素放置在页面上，根据其自身的位置属性来确定其显示位置。也就是说，元素的位置完全由其自身的CSS样式决定，不受其他元素的影响。

css#absolute {
 position: absolute;
 top:100px; /* 从顶部开始 */
 left:200px; /* 从左边开始 */
 width:300px;
 height:400px;
}

在上面的例子中，我们定义了一个ID为`absolute`的元素，使用绝对定位，并将其放置在页面上，距离顶部100像素，距离左边200像素。这个元素的宽度和高度分别是300像素和400像素。

**2. 相对定位**

相对定位是指将元素放置在其父元素中，根据其自身的位置属性来确定其显示位置。也就是说，元素的位置受到其父元素的影响。

css#relative {
 position: relative;
 top: -100px; /* 从顶部开始 */
 left: -200px; /* 从左边开始 */
 width:300px;
 height:400px;
}

在上面的例子中，我们定义了一个ID为`relative`的元素，使用相对定位，并将其放置在其父元素中，距离顶部-100像素，距离左边-200像素。这个元素的宽度和高度分别是300像素和400像素。

**区别**

绝对定位和相对定位之间有一个关键的区别：绝对定位会将元素从其父元素中脱离，而相对定位则不会。这意味着，如果使用绝对定位，元素的位置完全由其自身的CSS样式决定，不受其他元素的影响；而如果使用相对定位，则元素的位置受到其父元素的影响。

**示例**

下面是一个简单的示例，展示了绝对定位和相对定位之间的区别：

html<div id="parent">
 <div id="absolute">Absolute</div>
 <div id="relative">Relative</div>
</div>

css#parent {
 position: relative;
 width:500px;
 height:600px;
}

#absolute {
 position: absolute;
 top:100px; /* 从顶部开始 */
 left:200px; /* 从左边开始 */
 width:300px;
 height:400px;
}

#relative {
 position: relative;
 top: -100px; /* 从顶部开始 */
 left: -200px; /* 从左边开始 */
 width:300px;
 height:400px;
}

在这个示例中，我们定义了一个ID为`parent`的元素，使用相对定位，并将其放置在页面上。然后，我们定义了两个子元素：一个ID为`absolute`的元素，使用绝对定位；另一个ID为`relative`的元素，使用相对定位。

**结论**

DUILib提供了两种基本的位置布局方式：绝对定位和相对定位。绝对定位是指将元素放置在页面上，根据其自身的位置属性来确定其显示位置；相对定位是指将元素放置在其父元素中，根据其自身的位置属性来确定其显示位置。两种方式都可以帮助我们实现复杂的UI布局。

**参考**

* [DUILib文档]( />* [CSS Positioning](