HTML中元素的定位方式
初中物理就学过,位置是相对的,要有参照物,因此,所有定位都是相对参照物的定位。
position 属性:
规定元素的定位类型,该属性的可选值有static、relative、absolute、fixed、inherit。定义了position属性后,经常还要定义相对参照物的偏移量,即left,right,top,bottom属性值,当然,也可以不定义,那样的话,就是在参照物的位置上。
float属性:Z-index属性:
上面的定位都在是二维空间做的,定位过程中有可能出现元素部分重叠的情况,这种情况下,谁覆盖谁呢,由此引用了Z-index属性,来指定元素的层次。注意:static定位的元素,其Z-index恒等于0,无法修改;另外,Z-index属性只能用于position=relative/absolute/fixed这些已经在二维空间定位过的元素。
属性 | 值 | 定位参照物 |
是否仍占据文档流的位置 | 描述 |
---|---|---|---|---|
position |
static |
由文档流自然形成 |
是 |
默认值,,无需显式定义。元素出现在正常的流中(忽略 top, bottom, left, right, z-index 声明)。 |
relative |
相对自己在文档流中的位置 |
是,该元素在文档流中占据的空间不会释放 |
生成相对定位的元素,相对于其文档流位置进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
absolute |
相对第一个定位过的父元素,即position=relative/absolute/fixed的父元素,(static定位过的父元素不算) |
否,已经脱离文档流 |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
fixed |
相对浏览器窗口 |
否,已经脱离文档流 |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
inherit | 继承父元素的定位类型 | 由父元素的定位类型来确定 | 规定应该从父元素继承 position 属性的值。 | |
float | left、right、none、inherit | 相对父元素(不论是否定位过)和前一个浮动框 | 否,已经脱离文档流 | 浮动的框只能向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止 |
相关文章
- vscode怎么快速生成html模板_vscode怎样新建HTML文件
- 应用多开,定位,机型伪装这都有
- html refresh原理,HTML meta refresh 刷新与跳转(重定向)页面
- jsp中<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” 。。的重要性「建议收藏」
- [完整案例]编程实现动物头像定位-02
- html中如何写系统时间,在HTML页面获取当前系统时间
- CSS 定位详解
- pytest学习和使用16-HTML报告如何生成?(pytest-html)
- 【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )
- dedecms 模板文件不存在 无法解析文档!问题定位方法!详解程序员
- 文件Linux 打开 HTML 文件的方法(linux打开html)
- 简单构建HTML页面,连接MySQL数据库(html连接mysql)
- 刷新ALV定位到当前记录行详解编程语言
- 文件MySQL数据库存储HTML文件.(mysql存html)
- 标签使用MySQL过滤HTML标签(mysql过滤html)
- Linux解析HTML:一种快捷的方式(linux解析html)
- 同样是激光定位,这家国内厂商做得比HTC Vive还好?
- SQL Server慢速日志:精准定位网站性能瓶颈(sqlserver慢日志)
- Linux环境下Web开发的HTML文件编辑(html文件 Linux)
- MySQL数据库中如何存储和检索带有HTML标签的文本(mysql中html标签)
- MySQL中如何存储和检索HTML数据(mysql中html)
- HTML连接Oracle利用JavaScript即可实现(html连接oracle)
- Redis集群突发超时定位与解决(redis集群偶发超时)
- Redis与HTML的不同之处(redis跟html区别)
- js/html光标定位的实现代码
- 在ASP中不用模板生成HTML静态页直接生成.html页面