html position与z-index定位学习
position 属性规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
常用的值:
1.relative (相对定位):生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 left 位置添加 20 像素。
2.absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3.fixed (固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
4.static (默认值):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
5.inherit:规定应该从父元素继承 position 属性的值。
relative
元素会相对于它原来的位置偏移某个距离,元素原来所占的空间会被保留。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>定位的学习</title><style>#d1{width:400px;height:400px;background: red;position:relative; /*为祖先元素设为相对定位,不设置top等,位置不发生变化*/}#d2{width:200px;height:200px;background: yellow;position:absolute;/*为子元素设置绝对位置,其位置会相对祖先元素d1变化*/right:0;top: 0;}#d3{width:100px;height:100px;background: green;position: absolute;/*位置会相对祖先元素d2变化*/right:0;top:0;}</style></head><body><div id="d1"><div id="d2"><div id="d3"></div></div></div></body>
</html>
当子元素有俩个或多个时,子元素都会先根据其祖先元素的位置变化。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#d1{width: 200px;height: 200px;background: red;position:relative;}#d2{width:100px;height:100px;background: yellow;position: absolute;top:3px;left:3px;}#d3{width:50px;height:50px;background: green;position:absolute;top:103px;left:103px;}</style></head><body><div id="d1"><div id="d2"></div><div id="d3"></div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>left、right、top、bottom</title><style>#d1{width:200px;height:200px;background: red;margin:0 auto;margin-top:200px;line-height: 200px;text-align: center;position: relative;}#d2{width:100px;height:100px;position: absolute;top:50px;left:-90px;background: green;}#d3{width:100px;height:100px;position: absolute;top:-80px;left:50px;background: blue;}#d4{width:100px;height:100px;position: absolute;top:50px;right:-90px;background: yellow;}#d5{width:100px;height:100px;position: absolute;bottom:-90px;right:50px;background: pink;}</style></head><body><div id="d1">这是中间的div,祖先元素<div id="d2"></div><div id="d3"></div><div id="d4"></div><div id="d5"></div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#d1{width:200px;height: 200px;background: red;position: absolute;left:3px;top:3px; z-index:2; }#d2{width:200px;height:200px;background: yellow;position:absolute;left:50px;top:50px;z-index:1;}#d3{width:200px;height:200px;background: blue;position: absolute;left:90px;top:90px;z-index:3;}</style></head><body><div id="d1"></div><div id="d2"></div><div id="d3"></div></body>
</html>
html position与z-index定位学习相关推荐
- 08年A题数码相机定位学习笔记
To Be Continue- 文章目录 数码相机定位学习笔记 一.摘要 二.问题分析 三.刚体变换 3.1世界坐标系→\rightarrow→相机坐标系 3.2相机坐标系→\rightarrow→图 ...
- css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Position属 ...
- 机器人施教器的信息丢失_一种精准定位学习难度的施教方法及教育机器人与流程...
本发明涉及智能机器人技术领域,尤其涉及一种精准定位学习难度的施教方法及教育机器人. 背景技术: 近年来国家对教育事业越发重视,随着教育教学形式的多样化,教育机器人也逐步走入人们的生活.教育机器人是以激 ...
- M201: MongoDB Performance chapter 3 Index Operations学习记录
M201: MongoDB Performance chapter 3 Index Operations学习记录 运行环境 操作系统:windows 10 家庭中文版 Mongodb :Mongodb ...
- HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
- slam定位学习笔记(七)-g2o学习
主要学习的是这篇文章,但大佬并没有在文章里面仔细的讲g2o,所以我在网上找了这几篇介绍g2o的文章,讲的十分详细,对入门十分友好:文章一.文章二.文章三,这三篇都是一个作者写的,主要是针对编程实际操作 ...
- position属性:绝对定位position: absolute;相对定位 position: relative;固定定位 position: fixed;
position 属性: position常见的定位模式: 定位模式 描述 是否脱离文档流 移动模式 定位偏移属性 static 默认属性 对象遵循常规流 不移动 不移动 relative 相对定位 ...
- CVPR 2021 | 基于稠密场景匹配的相机定位学习
Learning Camera Localization via Dense Scene Matching 论文.代码地址:在公众号「3D视觉工坊」,后台回复「相机定位」,即可直接下载. 相机定位算法 ...
- 移动端— position: fixed;固定定位解决方案
移动端- position: fixed;固定定位解决方案 参考文章: (1)移动端- position: fixed;固定定位解决方案 (2)https://www.cnblogs.com/ruog ...
最新文章
- python中args1是什么意思_理解Python中的*,*args
- STM32使用串口IDLE中断的两种接收不定长数据的方式
- 基于Vmware player的Windows 10 IoT core + RaspberryPi2安装部署
- google js cdn_「效率工具」模拟CDN的浏览器扩展程序,改善在线隐私
- 23种设计模式(十八)状态变化之备忘录
- numpy 矩阵 秩_Python(NumPy):集合只能映射秩1数组
- android 简介动画,android动画简介
- mysql jdbc8.0驱动包下载_JDBC驱动jar包|JDBC驱动(mysql connector java)下载v8.0.11安装包 - 欧普软件下载...
- 路由器温度测试软件,教你增强小米路由WEB管理(一)——添加CPU温度显示
- 判断计算机电脑是否通电,电脑日常维护:查看硬盘通电时间,判断性能
- 【基础版】大学计算机-计算思维导论
- ssm+Vue计算机毕业设计益学(程序+LW文档)
- 国际信息研究学会专家杜彪:汉字识别是如何走上机器学习领域巅峰的?
- Python 雪球API 股票价格监控预警程序脚本
- 【泛微ecology sql】待办、已办、办结流程查询语句
- 中年人学C语言Windows程序设计,30 DialogBox控件
- 网优谷说明域名后缀对SEO有影响吗?
- 基于uml的大学图书馆图书信息管理系统设计实验_全网最新计算机专业毕业设计选题(题目)...
- 哈希洪水攻击是什么?
- 【原创】我们到底是不是产品经理:给互联网、软件业者