HTML定位
定位(position)
定位是一种更加高级的布局手段,通过定位可以将元素摆放到元素的任何位置
使用position属性来设置定位
可选值:static 默认值,元素是静止的没有开启定位 relative 开启元素的相对定位
absolute 开启元素的绝对定位 fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
相对定位(relative)
1、开启定位后需设置偏移量元素位置才会发生变化
2、相对定位是参照于元素在文档流中的位置进行定位的
3、相对定位会提升元素的层级
4、相对定位不会使元素脱离文档流
5、相对定位不会改变元素的性质(块还是块,行内还是行内)
偏移量(offset):top、bottom、left和right分别控制定位元素与定位位置上边、下边、左边和右边的距离
绝对定位(absolute)
1、如果不设置偏移量元素的位置不会发生变化
2、元素会从文档流中脱离
3、会改变元素的性质,行内变成块,块的宽度被内容撑开
4、会提升元素的层级
5、相对于其他包含块进行定位
包含块(containing block)
正常情况下,包含块就是离当前元素最近的祖先块元素
示例:<div><div></div></div> <div><span><em></em></span></div>
绝对定位的包含块:
包含块就是离它最近开启了定位的祖先元素,如果所有的祖先元素都没有开启定位则根元素(html标签,初始包含块)就是它的包含块
固定定位(fixed)
固定定位也是一种绝对定位,所以固定定位的大部分特点也和绝对定位一样
唯一不同的是固定定位参照于浏览器的视口进行定位,固定定位的元素不会随网页的滚动条滚动
粘滞定位(sticky)
粘滞定位和相对定位的特点基本一致,不同的是粘滞定位可以在元素到达某个位置时将其固定
绝对定位元素的布局
水平布局
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
开启绝对定位后,水平方向的布局等式需要添加left和right两个值,规则跟之前一样
当发生过度约束:
如果9个值中没有auto则自动调整right值以使等式成立
如果有auto则自动调整auto的值以使等式成立
可设置为auto的值:margin width left right
left和right的值默认是auto,如果不指定left和right,则等式不满足时会自动调整这两个值
垂直方向布局的等式也必须要满足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
元素的层级
对于开启了定位的元素,可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数,值越大元素的层级越高,越高则越优先显示
如果元素的层级一样,则优先显示靠下的元素
祖先元素的层级再高也不会盖住后代元素
HTML定位的更多相关文章
- Fis3的前端工程化之路[三大特性篇之资源定位]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- iPhone Anywehre虚拟定位提示“后台服务未启动,请重新安装应用后使用”的解决方法
问题描述: iPhone越狱了,之后在Cydia中安装Anywhere虚拟定位,但是打开app提示:后台服务未启动,请重新安装应用后使用. 程序无法正常使用... 解决方法: 打开Cydia-已安装, ...
- 网站定位之---根据IP获得区域
记得以前做一个培训机构网站时候需要定位,那时候用的搜狐的api,不是很精准. demo:https://github.com/dunitian/LoTCodeBase/tree/master/NetC ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- JS实现页面进入、返回定位到具体位置
最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...
- 如何定位Oracle数据库被锁阻塞会话的根源
首先再次明确下,数据库因为要同时保证数据的并发性和一致性,所以操作有锁等待是正常的. 只有那些长时间没有提交或回滚的事物,阻塞了其他业务正常操作,才是需要去定位处理的. 1.单实例环境 2.RAC环境 ...
- iOS开发系列--地图与定位
概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一个 ...
- 企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- 【初探Spring】------Spring IOC(三):初始化过程---Resource定位
我们知道Spring的IoC起到了一个容器的作用,其中装得都是各种各样的Bean.同时在我们刚刚开始学习Spring的时候都是通过xml文件来定义Bean,Spring会某种方式加载这些xml文件,然 ...
随机推荐
- css浅谈
一 CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...
- mysql plugin
mysql plugin 概要 mysql可以通过启动参数,系统命令mysql_install,mysql命令install plugin来加载指定的插件 mysql的存储引擎被设计成插件式,可以根据 ...
- ES6模板字符串及字符串的扩展方法
一.ES6模板字符串 传统定义字符串的方式是: const str='hello es2015,this is a string' ES6新增了一种定义字符串的方式用反引号进行标识 const str ...
- Navicat Premium 12连接MySQL数据库出现Authentication plugin 'caching_sha2_password' cannot be loaded的解决方案
1. 管理员权限运行命令提示符,登陆MySQL mysql -u root -p password 2. 修改账户密码加密规则并更新用户密码 ALTER USER 'root'@'localhost' ...
- Win Docker 安装C盘清理方法之一
背景 由于Docker默认安装到C盘,C盘空间越发的小了,虽然(win10)C盘满了并不会很大影响,但是强迫症患者是不能忍得 解决办法 查询https://stackoverflow.com/ques ...
- 关于Webservice接口对接相关总结
Webservice接口对接 因为近期处理了很多关于Webservice的接口对接,所以这篇文章是对近期自己的学习做一个简单的总结. 一: 对于接口对接,建议首先需要了解一下WSDL文件,以及入参的S ...
- go语言中运算符
Go语言学习笔记(运算符)-day01 go语言中与其他语言一样,存在多种运算符,下表列出了go语言中的运算符类型 算数运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 算数运算符 运算符 描述 ...
- 结合MATLAB、Python、R语言,在求得显著差异的边(节点对)之后,怎么画circle图
先来看看成果图: OK,开始画图: 实验背景声明:在脑影像分析中,我们首先构建脑网络,然 ...
- php 去除路由中index.php 通过 .htaccess 文件
首先在入口文件index.php得的当前目录下 创建 .htaccess文件. 然后将下面一段代码放进去: <IfModule mod_rewrite.c> RewriteEngine o ...
- 【SpringMVC】SpringMVC 异常处理
SpringMVC 异常处理 文章源码 异常处理思路 系统中异常包括两类:预期异常和运行时异常,前者通过捕获异常从而获取异常信息,后者主要通过规范代码开发.测试通过手段减少运行时异常的发生. Cont ...