- 小程序CSS入门
小程序样式课程-第28课-定位-相对定位
时间：2019/1/3 12:32:14 作者：互联网 来源：网络转载 查看：16682 评论：0内容摘要：基础用法设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移...基础用法
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
如下图所示：
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
小程序应用
默认效果
Wxml代码
<view>
<view class='fk'>区块1 </view>
<view class='fk'>区块2 </view>
<view class='fk'>区块3 </view>
</view>
<view class='cls'>
<view class='fk'>区块1 </view>
<view class='fk'>区块2 </view>
<view class='fk'>区块3 </view>
</view>
Wxss代码
.fk{
width: 100px;
height: 100px;
margin: 10px;
background-color: gainsboro;
}
.cls{
display: flex;
flex-direction: row;
}
相对定位效果
Wxml代码
<view>
<view class='fk'>区块1 </view>
<view class='fk a2'>区块2 </view>
<view class='fk'>区块3 </view>
</view>
<view class='cls'>
<view class='fk'>区块1 </view>
<view class='fk a2'>区块2 </view>
<view class='fk'>区块3 </view>
</view>
Wxss代码
.fk{
width: 100px;
height: 100px;
margin: 10px;
background-color: gainsboro;
}
.cls{
display: flex;
flex-direction: row;
}
.a2{
position: relative;
top: 50px;
left: 50px
}
效果如下图
欢迎大家支持我的视频课程：微信小程序样式开发入门
- 相关评论
- 本类推荐
- 本类排行
-
1-2小程序样式课程-第21课-字体-font-weight字体加粗
-
1-2小程序样式课程-第7课-文本-text-align水平对齐
-
1-2小程序样式课程-第18课-字体-font-size字体大小
-
1-2小程序样式课程-第11课-文本-text-shadow文本阴影
-
1-2小程序样式课程-第22课-outline轮廓
-
1-2小程序样式课程-第8课-文本-text-indent缩进文本
-
1-2小程序样式课程-第16课-文本-letter-spacing字母间隔
-
1-2小程序样式课程-第10课-文本-text-overflow 文本溢出
-
1-2小程序样式课程-第23课-框模型概述
-
1-2小程序样式课程-第19课-字体-font-style字体风格
-