uni-app <view>标签叠加布局
时间: 2023-12-23 15:04:55 浏览: 25
在 `uni-app` 中,可以使用 `absolute` 和 `relative` 定位来实现 `view` 标签的叠加布局。
首先,在父元素上设置 `position: relative`,子元素上设置 `position: absolute`,并且设置 `top`、`right`、`bottom`、`left` 四个属性中的至少两个属性,就可以实现子元素的定位。例如:
```html
<view class="parent">
<view class="child-1"></view>
<view class="child-2"></view>
</view>
```
```css
.parent {
position: relative;
width: 200px;
height: 200px;
}
.child-1 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.child-2 {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
background-color: blue;
}
```
上面的代码中,父元素 `.parent` 设置了 `position: relative`,子元素 `.child-1` 和 `.child-2` 设置了 `position: absolute`,并且分别设置了 `top`、`left` 和 `bottom`、`right`,实现了子元素的叠加布局。可以根据自己的需求来设置相应的位置和大小。
相关推荐
![json](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)