微信小程序开发position等于static、relative、absolute、fixed、stricky时元素显示详细介绍

news2024/9/28 21:19:57

No Position

不设置position时显示,以红色元素做测试:

Static

元素根据界面正常流进行定位。top、right、bottom、left 和 z-index 属性不起作用。这是默认值。

红色元素设置position: static,显示如下:

Relative

元素根据界面正常流进行定位。以元素当前位置为基准,根据top、right、bottom、left设置进行偏移。元素偏移不会影响其他元素显示的位置,即其他元素在元素偏移前后位置不变,仍会保留元素偏移前空间。

红色元素设置position: relative; left: 100px,显示如下。

Absolute

元素脱离正常的文件流。以最近的position不为static的祖先元素位置为基准,根据top、right、bottom、left设置进行偏移。其他元素会调整位置,相当于此元素不存在时的显示。

红色元素父元素设置position:relative,红色元素设置position: absolute; left: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1410516.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言和C++中不定参数解析

你所看到的惊艳,都曾被平庸历练 文章目录 简介C语言不定参数不定参宏函数 C不定参数方法一:递归展开方式二:折叠表达式方法三:逗号表达式 总结 简介 相信学过c/c的佬们都知道,如果一个函数将自己的参数确定好后&#…

泛微智能公文,为党政机关配备一位7*24小时公文助手,办文更高效

政务数字化智能水平明显提升是数字中国建设目标之一,平台化、智能化已成为政务协同办公的未来发展趋势,政府机关持续加强新技术全流程应用。 公文办理作为党政机关单位日常工作任务中重要的一环,泛微在全程数字化的公文管理体系中融入智能化技…

【GAMES101】Lecture 09 纹理贴图 点查询与范围查询 Mipmap

目录 纹理贴图 纹理放大-双线性插值 点采样纹理所带来的问题 Mipmap 各向异性过滤 纹理贴图 我们在之前的着色里面说过如何给物体上纹理,就是对于已经光栅化的屏幕点,就是每个像素的中心,去寻找对应纹理的映射位置的纹理颜色&#xff0…

SWMM模型INP解析

.INP文件解析 [OPTIONS]:SWMM软件运行前需要设置的参数 [RAINGAGES]雨水节点,核心设置雨水时间序列,可为INP内部数据也可为外部txt数据,TIMESERIES对应【TIMESERIES】模块,TS_1为时间序列名称 [TIMESERIES]&#xff0…

ELK之Grafana添加钉钉告警信息

Grafana版本如下: [roottest data]# grafana-server -v Version 8.4.6 (commit: c53173ff6, branch: HEAD)一、新建钉钉群,并自定义一个机器人 点击右上角设置 ------》 智能群助手 ------》 添加机器人 ------》右侧设置按钮 ------》点击自定义&…

记一次SPI机制导致的BUG定位【不支持:http://javax.xml.XMLConstants/property/accessExternalDTD】

1、前因 今天在生产环境启用了某个功能,结果发现有个文件上传华为云OBS失败了,报错如下: Caused by: java.lang.IllegalArgumentException: 不支持:http://javax.xml.XMLConstants/property/accessExternalDTDat org.apache.xal…

ctfshow信息收集(web1-web20)

目录 web1 web2 web3 web4 web5 web6 web7 web9 web10 web11 web14 web15 web16 web17 web18 web19 web20 web1 根据提示的孩子开发的时候注释没有被及时删除 web2 js原因无法查看源代码 第一种方法 在url前加入 view-source: 会显示页面源代…

获取双异步返回值时,如何保证主线程不阻塞?

目录 一、前情提要二、JDK8的CompletableFuture1、ForkJoinPool2、从ForkJoinPool和ThreadPoolExecutor探索CompletableFuture和Future的区别 三、通过CompletableFuture优化 “通过Future获取异步返回值”1、通过Future获取异步返回值关键代码(1)将异步…

springboot-mybatis项目

一、后端开发环境搭建 1、File->New->Projet 2选择 Spring Initializr ,然后选择默认的 url 点击next 3勾选Spring Web、SQL模板,next 4点击finish,搭建完成 二 数据库 1 新建数据库 2 执行sql建表 SET NAMES utf8mb4; SET FOREIGN…

嵌入式学习-C++-Day2

嵌入式学习-CDay2 一、思维导图 二、作业 1.封装一个矩形类(Rect),拥有私有属性:宽度(width)、高度(height),定义公有成员函数:初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函…

ActiveMQ|01-ClassicArtemis功能介绍

接上篇-MQ消息队列主流消息服务规范及代表产品,ActiveMQ就是基于JMS消息服务规范的消息中间件组件,主要应用在分布式系统架构中,帮助构建高可用、 高性能、可伸缩的企业级面向消息服务的系统 本文速览: JMS对象模型ActiveMQ的功…

elementplus Dialog 对话框设置距离页面顶部的距离

默认为 15vh&#xff0c;当弹窗过于高的时候&#xff0c;这个距离其实是不合适的 <el-dialogv-model"dialogVisible"title"Tips"width"30%":before-close"handleClose"top"6vh"><span>This is a message</s…

LeetCode刷题---旋转链表

解题思路: 首先创建辅助节点cur遍历指向链表最后一个节点&#xff0c;并将cur的下一个节点指向head头节点&#xff0c;形成闭环&#xff0c;并且在遍历的过程中计算链表的长度n。 n-k表示当前节点&#xff08;当前节点指向未反转节点的最后一个节点&#xff09;到反转后的链表的…

输入框限制输入两位小数 输入金额限制 双向绑定输入框能继续输入但是变量的数据不变解决方案 input 保留两位小数

移动端项目 需求是 输入框只能输入1000以内的数字保留两位小数 开发中发现 用vue开发双向绑定 不管是用value还是v-model 在输入时用input监听输入框变化 校验是否匹配 当不匹配是修改绑定的变量 inputValue时 打印inputValue符合预期 但是input输入框中还是原来输入的值 没有…

对话框与多窗体设计 —— 自定义对话框及其调用

3.2 自定义对话框及其调用3.3 Splash与登录窗口 3.2 自定义对话框及其调用 在一个应用程序设计中&#xff0c;为了实现一些特定的功能&#xff0c;必 须设计自定义对话框。自定义对话框的设计一般从 QDialog继承&#xff0c;并且可以采用UI设计器可视化地设计对 话框。对话框的…

发送消息提醒学习使用

效果图 数据库表及实体模型参考 创建消息事件模型 public class SystemMsgSendEvent implements DomainEvent {private String eventId;//事件idprivate ExecutePoint executePoint;//执行方式 事务提交后当前线程private OperateInfo operateInfo;//操作信息private String …

【AIGC】Diffusers:AutoPipeline自动化扩散生图管道

前言 &#x1f917; 扩散器能够完成许多不同的任务&#xff0c;并且您通常可以将相同的预训练权重用于多个任务&#xff0c;例如文本到图像、图像到图像和修复。但是&#xff0c;如果您不熟悉库和扩散模型&#xff0c;可能很难知道将哪个管道用于任务。例如&#xff0c;如果您…

【博客搭建记录贴】day4_Hexo基本操作,添加草稿并发布

目录 1.将项目导入到开发环境1.1 先把项目导入到IDEA中1.2 确认IDEA中服务器启动正常 2.Hexo基本操作: 添加草稿并发布2.1 生成一个草稿文件2.2 在页面上查看草稿3.3 将草稿正式发布 1.将项目导入到开发环境 我本地已经安装了 IntelliJ IDEA&#xff08;版本&#xff1a;社区版…

web蓝桥杯真题--13、水果摆盘

背景介绍 目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式&#xff0c;这次试题将利用 Flex 实现经典布局效果。 准备步骤 在开始答题前&#xff0c;你需要在线上环境终端中键入以下命令&#xff0c;下载并解压所提供的文件。 wget https://labfile.oss.a…

某马头条——day11+day12

实时计算和定时计算 流式计算 kafkaStream 入门案例 导入依赖 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-streams</artifactId><exclusions><exclusion><artifactId>connect-json</artifactId&…