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

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: 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

g2o--ba代码解析

概要 g2o是常用的图优化理论c库,其自带了很多example讲解如何使用该库文件,本文分析其中ba的示例代码。 所谓的图优化,就是把一个常规的优化问题,以图(Graph)的形式来表述。 在图中,以顶点表…

单片机介绍

本文为博主 日月同辉,与我共生,csdn原创首发。希望看完后能对你有所帮助,不足之处请指正!一起交流学习,共同进步! > 发布人:日月同辉,与我共生_单片机-CSDN博客 > 欢迎你为独创博主日月同…

Spring Boot 模块工程(通过 Maven Archetype)建立

前言 看到我身边的朋友反馈说,IDEA 新建项目时,如果通过 Spring Initializr 来创建 Spring Boot , 已经无法选择 Java 8 版本,通过上小节的教程,不知道该如何创建 Spring Boot 模块工程。如下图所示: 一.IDEA 搭建 …

记录一下uniapp 集成腾讯im特别卡(已解决)

uniapp的项目运行在微信小程序 , 安卓 , ios手机三端 , 之前这个项目集成过im,不过版本太老了,0.x的版本, 现在需要添加客服功能,所以就升级了 由于是二开 , 也为了方便 , 沿用之前的webview嵌套腾讯IM的方案 , 选用uniapp集成ui ,升级之后所有安卓用户反馈点击进去特别卡,几…

【深度学习】CodeFormer训练过程,如何训练人脸修复模型CodeFormer

文章目录 BasicSR介绍环境数据阶段 I - VQGAN阶段 II - CodeFormer (w0)阶段 III - CodeFormer (w1) 代码地址:https://github.com/sczhou/CodeFormer/releases/tag/v0.1.0 论文的一些简略介绍: https://qq742971636.blog.csdn.net/article/details/134…

Mysql索引相关学习笔记:B+ Tree、索引分类、索引优化、索引失效场景及其他常见面试题

前言 索引是Mysql中常用到的一个功能,可以大大加快查询速度,同时面试中也是经常碰到。本文是学习Mysql索引的归纳总结。 索引采用的数据结构——B 树 本部分主要是参考自小林Coding B树的由来 二分查找可以每次缩减一半,从而提高查找效率…

【mongoDB】数据库的创建和删除

目录 1. 查看所有数据库 2.创建数据库 3.查看当前连接的数据库 4.删除数据库 1. 查看所有数据库 show dbs 2.创建数据库 use 数据库名 例如创建一个名为 aaa 的数据库 3.查看当前连接的数据库 db 4.删除数据库 use 数据库名 db.dropDataBase() 比如删除数据库 aaa

1.25号c++

1.引用 引用就是给变量起别名 格式: 数据类型 &引用名 同类型的变量名 (& 引用符号) eg: int a 10; int &b a; //b引用a,或者给a变量取个别名叫b int *p; //指针可以先定义 后指向 p &a; //int &a…

【MySQL】如何通过DDL去创建和修改员工信息表

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-fmKISDBsFq74ab2Z {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

docker(第二部分)

来自尚硅谷杨哥 少一点胡思乱想,心中无女人,编码自然神,忘掉心上人,抬手灭红尘。人间清醒,赚钱第一。好好学习,天天向上。听懂六六六。 7.Dokcer容器数据卷 1,)坑:容器卷记得加入 …

shared_ptr 与 unique_ptr 的转换 笔记

推荐B站文章: 6.shared_ptr与unique_ptr_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p6&vd_sourcea934d7fc6f47698a29dac90a922ba5a3我的往期文章: 独占指针:unique_ptr 与 函数调用-CSDN博客https://blog.csdn.n…

银行数据仓库体系实践(5)--数据转换

数据转换作业主要是指在数据仓库内的结构化数据批量加工,对于非结构化数据以及在线查询接口、数据流的开发主要是遵循代码开发规范以及各中间件的开发规范,如使用java来开发遵守java开发规范,使用Kafka需要遵循Kafka的使用和设计规范。同时做…

对话泛能网程路:能源产业互联网,行至中程

泛能网的能源产业互联网的标杆价值还不仅于此。其在产业互联之外,也更大的特殊性在于其也更在成为整个碳市场的“辅助运营商”,包括电力、碳等一系列被泛能网帮助企业改造和沉淀的要素资产,都在构成着碳交易市场的未来底层。 这恰是产业互联…

有关Quick BI中Case子句中多次使用lod函数返回空值问题分析

一、Quick BI中的lod_ include函数 lod_ include {维度1[,维度2]...:聚合表达式[:过滤条件]} 作用:将表达式中的维度一起作为分组依据进行订算。其中, 1) 维度1[,维度2]... :声明维度,指定聚合表达式要连接到的一个或多个维…

开源项目Git Commit规范与ChangeLog

一,conventional commit(约定式提交) Conventional Commits 是一种用于给提交信息增加人机可读含义的规范。它提供了一组用于创建清晰的提交历史的简单规则。 1.1 作用 自动化生成 CHANGELOG基于提交类型,自动决定语义化的版本变更向项目相关合作开发…

OpenCV书签 #互信息的原理与相似图片搜索实验

1. 介绍 互信息(Mutual Information) 是信息论中的一个概念,用于衡量两个随机变量之间的关联程度。在图像处理和计算机视觉中,互信息常被用来度量两幅图像之间的相似性。 互信息可以看成是一个随机变量中包含的关于另一个随机变…

【网站项目】基于SSM的251国外摇滚乐队交流和周边售卖系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

DAY30:回溯算法332\51\37基本思路了解+总结

Leetcode: 332 重新安排行程 代码随想录 这道题目有几个难点: 一个行程中,如果航班处理不好容易变成一个圈,成为死循环,容易出现环路。有多种解法,字母序靠前排在前面,让很多同学望而退步,如…

yolov8上使用gpu教程

yolov8上使用gpu教程 安装Cuda和Cudnnyolov8上使用gpu 安装Cuda和Cudnn 1.查看支持的cuda版本,并去官网下载。 nvidia-smi2.网址:https://developer.nvidia.com/cuda-toolkit-archive 3.安装细节 安装的前提基础是,有vs的C环境。我电脑有…

多流转换 (分流,合流,基于时间的合流——双流联结 )

目录 一,分流 1.实现分流 2.使用侧输出流 二,合流 1,联合 2,连接 三,基于时间的合流——双流联结 1,窗口联结 1.1 窗口联结的调用 1.2 窗口联结的处理流程 2,间隔联结 2.1 间隔联…