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,一经查实,立即删除!

相关文章

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

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

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

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

WebService中文件传输

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

Django框架-Form组件

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

主席树的各类模板(区间第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大&…

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

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

Lyft Level 5 Challenge 2018 - Elimination Round翻车记

打猝死场感觉非常作死。 A&#xff1a;判一下起点和终点是否在其两侧即可。 #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> #include<cstring> #include<algorithm> using namespace std; int read() {int x0,…

mysql用户的权限分配

2019独角兽企业重金招聘Python工程师标准>>> 因今天在分配数据库权限的时候&#xff0c;同事反映账户不能使用函数&#xff0c;遂搜集资料总结了一番关于mysql用户的权限分配。 MySQL 赋予用户权限命令的简单格式可概括为&#xff1a; grant 权限 on 数据库对象 to …

小米360口水战背后:国产手机第三态诞生

摘要&#xff1a;按照双方公布的配置信息&#xff0c;小米手机青春版为1.2G H z双核处理器&#xff0c;华为闪耀为1G H z双核。种向市场投入海量推广资金&#xff0c;以换取产品上的高利润&#xff0c;代表为步步高、金立、O PPO。南都制图&#xff1a;宋小伟 互联网入侵通信业…

线段与多边形的关系

转自周见智 介绍 最近项目中要用到有关几何&#xff08;Geometry&#xff09;方面的知识&#xff0c;程序需要判断给定的一条线段&#xff08;Segment&#xff09;与指定多边形&#xff08;Polygon&#xff09;的位置关系。这种关系分为三种&#xff1a;多边形包含线段、多边形…

解决,文件上传到 ftp 服务器,中文出现乱码问题

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 上传到 ftp 服务器&#xff0c;中文出现乱码解决&#xff0c;之前文件名 “ 网关信息 ” 始终不能正确显示&#xff0c;尝试了多种编码…

常用负载均衡策略分析

背景 一般生产环境单机所能承受的QPS压力为2w左右&#xff0c;过大的压力会导致服务器爆炸。即便是单机能够撑住2w QPS&#xff0c;一般也不会这么做&#xff0c;生产环境一般会预留50%的冗余能力&#xff0c;防止QPS因为某个热门的活动而爆炸。当QPS超过单机所能承受的压力时&…

解决- SecureCRT上运行 linux vim 命令中文出现乱码

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 乱码如图&#xff1a; 这个问题是CRT的编码设置造成的&#xff0c;改一下设置就可以了&#xff1a; 1. 在当前连接上右键选择最后一个 2…

linux中操作数据库的使用命令记录

1&#xff0c;mysql 查看数据库表编码格式&#xff1a; show create table widget; 修改数据库表编码格式&#xff1a; alter table widget default character set utf8; 修改数据库表中某字段的编码格式&#xff1a; alter table widget change widget_name widget_name varc…

ICC Scenario Definition

现代先进工艺下的后端设计都是在 MCMM 情况下设计的&#xff0c;所谓 MCMM 就是 muti-corner muti-mode&#xff0c;用于芯片的不同工作模式和工作条件。 后端设计过程中&#xff0c;需要保证芯片在所有工作模式和工作条件下都能正常工作&#xff0c;工作模式一般只有几种&…

持续集成与持续部署宝典Part 2:创建持续集成流水线

2019独角兽企业重金招聘Python工程师标准>>> 在本系列文章中&#xff0c;我们将探讨在容器时代如何在基于Docker的环境中创建连贯的工作流程和流水线来简化大规模项目的部署。另外&#xff0c;我们还将详细介绍如何利用Docker和Rancher自动化处理这些工作流。 在上文…

64 装饰器函数: 母版 csrf防御机制 cookie

主要内容: 1: 装饰器函数 a: 原理: 在不改变原函数的代码和调用方式的情况下, 给函数动态的添加功能 b: 实例: 装饰器的原理: def yue(tools):print(使用%s约一约 % tools) def wrapper(fn):def inner(*args, **kwargs):print(先准备好钱)fn(*args, **kwargs)return inner yue …

Eclipse将引用了第三方jar包的Java项目打包成jar文件的两种方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 方案一&#xff1a;用Eclipse自带的Export功能 步骤1&#xff1a;准备主清单文件 “MANIFEST.MF”&#xff0c; 由于是打包引用了第三…

一个判断session是否过期的小技巧

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Session一直是我们做web项目经常使用的&#xff0c;以前没太注意&#xff0c;这次又细致的看了下&#xff01; 1.session其实就是一个Ma…

jQuery基础-事件

只能添加一个处理函数&#xff0c;后面的会覆盖前面 会有兼容性差异 冒泡 会依次检查父元素 截获冒泡 或者 最大的缺陷 并且在IE和NetSpace里面分别为冒泡和捕获两种 多个处理函数 依次执行 捕获--->自己--->冒泡 true 只捕获&#xff0c;不冒泡 false 只冒泡 从父元素的…