CSS中position的absolute和relative用法

 

  • static: HTML元素的默认定位方式
  • absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
  • relative: 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
  • fixed: 元素的位置相对于浏览器窗口是固定位置, 即使窗口是滚动的它也不会移动

记住如下的口诀

  • 绝对定位(absolute)位置是相对最近已经定位的父元素,如果父元素本身没有使用position定位,则相对于文档(html)定位
  • 绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位

 

 

在绝对定位时候我们可以使用css z-index定义css层重叠顺序。同时left、right、bottom、top的数

 

转载于:https://www.cnblogs.com/asdyzh/p/9740146.html

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

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

相关文章

Spring HttpMessageNotReadableException异常

&#xff08;一&#xff09;现象 我们在进行服务间的rpc调用时&#xff0c;可能会遇到org.springframework.http.converter.HttpMessageNotReadableException异常。 其具体报错如下&#xff1a; {"timestamp": 1456043810789,"status": 400,"error…

解决 -- java 调用webservice 服务端收到参数为null

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 我的客户端和服务端都写的很简单&#xff0c;只是调用服务的时候&#xff0c; 服务端得不到参数&#xff0c;后来发现只改一个地方就可…

fastJson性能测试

测试装备&#xff1a; mac pro 6核12线程 测试代码&#xff1a; &#xff08;1&#xff09;序列化对象&#xff1a; import lombok.Data;Data public class User {int id;String name;int age;String address; } &#xff08;2&#xff09;序列化逻辑&#xff1a; import…

避免流量高峰期CDN问题的10个方法

在视频流媒体中&#xff0c;因平台火爆而出现问题是件好事。至少&#xff0c;这比根本没有观众要好。\\也许你正在使用世界级的CDN&#xff0c;但是&#xff0c;在大型赛事期间&#xff0c;当CDN的服务器和对等点流量变得饱和的时候&#xff0c;一些用户还是无法享受到流畅的体…

Android应用进入爆发期 手机游戏仍是市场重心

近日&#xff0c;91无线发布了《91无线移动应用发展趋势报告&#xff08;Android版&#xff09;》。报告显示&#xff0c;2012年&#xff0c;无论Android移动应用用户下载还是开发者研发均呈爆发态势&#xff0c;手机游戏仍是市场重心所在。同时&#xff0c;Android移动应用下载…

MQTT Client软件-MQTTBox

最近发现了一个连接mqtt broker的软件&#xff1a;MQTTBox。GitHub地址&#xff1a;https://github.com/workswithweb/MQTTBox 官网网站的介绍为&#xff1a;使用MQTTBox增强你的物联网流程 MQTT客户端特性 支持TCP、TLS、Web Sockets和安全的Web Sockets连接MQTT服务器支持各种…

fastJson toJSONString注意点

fastJosn是阿里爸爸推出一款高性能序列化工具&#xff0c;号称最快的json序列化工具。不过好像也就那样&#xff0c;在量比较大的时候优势才会明显。单次序列化时间还是会达到几十毫秒的级别。 Fastjson is a Java library that can be used to convert Java Objects into the…

WebService中文件传输

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 WebService处理传递普通的信息&#xff0c;还可以传输文件&#xff0c;下面介绍WebService是怎么完成文件传输的。 1、 首先编写服务器端…

Django框架-Form组件

一、DjangoForm组件介绍 我们之前在html页面中利用form表单向后端提交数据时&#xff0c;都会写一些获取用户输入的标签并且用form标签把它们包起来。 与此同时我们在好多场景下都需要对用户的输入做校验&#xff0c;比如验证用户是否输入&#xff0c;输入的长度和格式等是否正…

中国经济转型知易行难

摘要&#xff1a;一个亚洲国家正在崛起&#xff0c;出口机器势不可挡&#xff0c;财富快速增长&#xff0c;觉得美国已是过去&#xff0c;自己的时代已经到来。这是2012年的中国&#xff1f;没错———但也是上世纪80年代的日本。 美国《芝加哥论坛报》网站5月20日文章&#xf…

进程和线程的剖析

进程和线程的区别&#xff1f;什么时候用进程&#xff1f;什么时候用线程&#xff1f; 答&#xff1a;首先得知道什么是进程什么是线程&#xff1f; 我的理解是进程是指在系统中正在运行的一个应用程序&#xff1b;程序一旦运行就是进程&#xff0c;或者更专业化来说&#xff1…

解决 java.net.ConnectException: Connection refused: connect 异常

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一、 我的情况很简单&#xff1a; 只是因为我调用服务端接口方法包名没有写对&#xff0c;应该如下面代码中这样写&#xff1a; call.…

主席树的各类模板(区间第k大数【动,静】,区间不同数的个数,区间=k的个数)...

取板粗 好东西来的 1.&#xff08;HDOJ2665&#xff09;http://acm.hdu.edu.cn/showproblem.php?pid2665 &#xff08;POJ2104&#xff09;http://poj.org/problem?id2104 &#xff08;POJ2761&#xff09;http://poj.org/problem?id2761 题意&#xff1a;求区间第K大&…

java类内部的变量

类内部的变量分为两部分&#xff1a; 一.类的成员变量 在类内部&#xff0c;变量定义部分&#xff0c;定义的变量。 二.局部变量 在类内方法体中定义的变量和方法中涉及的变量。 成员变量和局部变量的区别&#xff1a; &#xff08;1&#xff09;成员变量在整个类中都有效…

腾讯搜搜退出PC搜索领域:百度搜狗迎来双龙竞争

摘要&#xff1a;据北京商报报道&#xff0c;上周末&#xff0c;腾讯对公司组织架构进行了大规模调整。业内普遍认为&#xff0c;搜搜并入腾讯无线后&#xff0c;这个独立搜索平台将被合并&#xff0c;失去独立性&#xff0c;也将令搜搜官网域名soso.com走向“没落”。据北京商…

facade-pattern外观模式

外观模式&#xff1a; 外观模式是面向对象编程中的重要设计模式。外观类用来掩盖复杂的内部逻辑&#xff0c;为用户提供简洁统一的服务接口。外观类的主要功能如下&#xff1a; 1.通过提供简明的对外API接口&#xff0c;来提高程序的可阅读性和间接性。 2.提供通用的特定功能…

Web Service 客户端,调用服务方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 只是最简单的调用web service 服务&#xff0c;至于要传什么参数全看到业务了。 以下是最简单的调用方式 &#xff1a; package hdmp…

分享Spring Cloud分布式微服务架构图

分布式、微服务、云架构JAVA语言开发、跨平台、高性能、高可用、安全、服务化、模块化、组件化、驱动式开发模式 从现在开始&#xff0c;我这边会将近期研发的springcloud微服务云架构的搭建过程和精髓记录下来&#xff0c;帮助更多有兴趣研发spring cloud框架的朋友&#xff0…

返回一个list的全部 倒叙排列的方法

#反向迭代一个listlist[2,4,6,4,3,7,5,45,23,6,5,32,6,52,324,23,65,76,3,234,6,3,4,356,7,74,234,35,7,86]def funrev(list): list1[] for i in range(len(list)): list1.append(list[-i-1]) print(list1) return list1print(************************)lis…

互联网手机潮进入PK时代:周鸿祎激战小米雷军

摘要&#xff1a;事实上&#xff0c;周鸿祎本人也多次强调&#xff0c;对于对手他一向实事求是&#xff0c;“对小米手机这种模式持肯定态度&#xff0c;它是第一个做互联网手机的”。花费精力做出漂亮的销售业绩&#xff0c;这是互联网手机最关键命题&#xff0c;配置战、价格…