小程序布局中相对定位的用法

10月前作者：低代码布道师分类：Toy博客阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了小程序布局中相对定位的用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序中一般为了有一定的设计效果，会将下边组件的内容提升一点到上边去，比如我们的电商展示模板里，会将商品列表覆盖一点到背景图，效果如下：
小程序布局中相对定位的用法
这种要如何搭建呢？就是利用到了CSS相对定位的原理

搭建组件

我们用布局容器先搭建好布局，先添加一个父容器，里边添加三个子容器
小程序布局中相对定位的用法
我们第一个子容器设置宽为100%，高为224px，并设置一下背景图

那我们的背景图要做多大呢？一般我们的手机宽我们约定为375px，然后我们在电脑上做图的时候就做成750px的，因为宽度是等比放大了两倍，高度也要等比放大两倍，高度要做成448

为了在小程序中能显示背景图，我们通常会把素材放到素材管理中
小程序布局中相对定位的用法
然后给每一个组件都设置一定的边框

相对定位

在我们目前的布局中，普通容器默认是块级布局的效果，块级布局宽度会充满整行，所以是从上到下排列。

而相对定位的意思，是本身自己的位置还保留，我们可以把组件挪到其他位置，通过top、left、bottom、right四个属性来挪动位置。

我们分别设置一下这四个位置的效果，先设置top为30
小程序布局中相对定位的用法
然后是left:30

然后是right:30

我现在要让我的第二个组件往上移，那自然是要设置bottom属性，我们设置一下给一个36PX的距离

可以看到，我通过定位设置了距底部36PX后，组件往上挪了一点，但是下边的组件并没有跟着挪上来，这就是相对定位，自身的空间还保留，但是可以通过属性来进行移动

总结

在布局中有两个难点，一个是采用什么布局，另一个就是设置定位，把这两个知识点掌握并能灵活运用就可以制作出需要的页面效果来。文章来源地址https://www.toymoban.com/news/detail-508528.html

到了这里，关于小程序布局中相对定位的用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

前端定位技术大揭秘：相对定位、绝对定位和固定定位详解

在现代网页设计中，元素的位置布局至关重要。而在前端开发中，掌握定位技术是必不可少的。本文将深入探讨前端中的三种关键定位技术：相对定位、绝对定位和固定定位。通过详细介绍每种技术的概念、使用方法和实际应用，帮助您更好地理解和运用这些定位技术。 1.

2024年02月15日
浏览(45)
Android入门教程 | UI布局之RelativeLayout 相对布局

RelativeLayout 简述 RelativeLayout 继承于 android.widget.ViewGroup，按照子元素之间的位置关系完成布局，作为 Android 系统五大布局中最灵活也是最常用的一种布局方式，非常适合于一些比较复杂的界面设计。 RelativeLayout 和 LinearLayout 类似，都是 ViewGroup，能“容纳”多个子view。 Relativ

2024年04月25日
浏览(35)
Selenium 相对定位

目录前言：相对定位工作原理可用的相对定位 Above Below

2024年02月12日
浏览(41)
鸿蒙Harmony-相对布局（RelativeContainer）详解

成年人的世界，从来没有容易二字，想要什么，就得凭自己的努力去拿，遇到事情就得自己生生的硬抗，希望你即使再辛苦，但还是会选择这滚烫的人生，加油陌生的朋友们目录一，定义二，设置依赖关系 2.1 锚点设置 2.2 设置相对于锚点的对齐位置 RelativeContainer为采用相

2024年02月01日
浏览(55)
CSS绝对定位（absolute）、相对定位（relative）方法（详解）

什么是定位？元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定 position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。属性： relative 相对定位

2024年01月16日
浏览(41)
HarmonyOS应用开发学习笔记 UI布局学习相对布局（RelativeContainer）

官方文档其实很好理解：alignRules{}里面表示：元素四个方向（left，top，bottom，right），相对于谁（anchor：‘id’）的什么位置（HorizontalAlign.Start ，VerticalAlign.Bottom ，VerticalAlign.Bottom， HorizontalAlign.End ） RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位

2024年02月02日
浏览(51)
谈谈selenium4.0中的相对定位

2021-10-13 发布的 selenium 4.0 开始引入，selenium 3.X是没有的 4.10维护了下其他都是文档、异常信息方面的处理 D:seleniumdemorelative.html 如下界面实例代码执行效果在find_element的源码中有这么一段也就是说你传入的by不仅仅可以是下面这8个，还可以是RelativeBy对象那如果是Relati

2024年02月04日
浏览(37)
Android Studio入门之常用布局的讲解以及实战（附源码超详细必看）（包括线性布局、权重布局、相对布局、网格布局、滚动视图）

运行有问题或需要源码请点赞关注收藏后评论区留言顾名思义，线性布局像是用一根线把它的内部视图串起来，故而内部视图之间的排列顺序是固定的，要么从左到右，要么从上到下排列。通过属性android:orientation区分两种方向下面通过一个实例讲解效果如下 activity_linea

2023年04月20日
浏览(48)
XPath 元素定位方式：绝对路径和相对路径的比较与应用

2023年07月13日
浏览(51)
HTML--CSS--浮动布局及定位布局

块元素独占一行行内元素在有多个的时候，就是从左到右排在一行块元素包括： div , p , hr 行内元素： span , i , img float 属性： left 向左 right 向右作用我目前看起来就是浮动元素的宽度是由内容决定的，而不是占满效果：但是需要注意，如果给定的宽度不够，效果会偏差：

2024年01月19日
浏览(60)