position定位说明

简介:
(1)定位类别:
static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative(相对定位)  对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位)  这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
(2)相对定位

当Position属性值为Relative时 
对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置 
Top的值表示对象相对原位置向下偏移的距离 
bottom的值表示对象相对原位置向上偏移的距离 
两者同时存在时,只有Top起作用。 
left的值表示对象相对原位置向右偏移的距离 
right的值表示对象相对原位置向左偏移的距离 
两者同时存在时,只有left起作用。

如果相对定位的对象有padding 和border 和 margin时,定位的起点不受影响。还是原来物体的位置。

(3)绝对定位

当Position属性值为absolute时 
对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来 
Top的值表示对象上边框与浏览器窗口顶部的距离 
bottom的值表示对象下边框与浏览器窗口底部的距离 
两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。 
left的值表示对象左边框与浏览器窗口左边的距离 
right的值表示对象右边框与浏览器窗口右边的距离 
两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。 
在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。注:绝对定位与文档流无关

(4)被关联的定位

 

<div ——————————— position:relative;最近的祖先定位元素,参照物
   <div—————————-没有设置为定位元素,不是参照物
     <div———————-没有设置为定位元素,不是参照物
       <div box1
       <div box2 ——–position:absolute; top:50px; left:120px;
       <div box3
 
Box2设置成绝对定位元素,脱离了文档流,文档流由box1-box2-box3变为box1-box3,box2以最近的定位祖先(蓝色框)为参照物。
层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
   <div—————————-没有设置为定位元素,不是参照物
     <div———————- position:relative 参照物
       <div box1
       <div box2 ——–position:absolute; top:50px; left:120px;
       <div box3

 

 


本文转自 韬光星夜 51CTO博客,原文链接:http://blog.51cto.com/xfqxj/477070,如需转载请自行联系原作者

相关文章
|
JavaScript 定位技术 API
uniapp腾讯地图路线规划
uniapp腾讯地图路线规划
992 0
|
存储 NoSQL 关系型数据库
一.MongoDB入门-MongDB介绍和安装
MongoDB入门-MongDB介绍和安装
|
弹性计算 数据可视化
对云效流水线 Flow 的一些体验
Flow是阿里云的CI/CD工具,以其可视化界面和拖拽式构建流程简化了新手上手难度,同时提供代码检查、构建、测试及部署等功能。尽管对CI/CD概念新手仍有学习曲线,Flow的入门教程有助于理解和使用。Flow在性能和开放性上表现出色,支持多种语言和框架,能与阿里云服务集成。成本相对较低,适合与阿里云生态匹配的团队。与其他CI/CD工具比较,Flow在功能和性能上有竞争力,但最佳选择取决于团队具体需求。总体而言,Flow是值得考虑的CI/CD解决方案。
对云效流水线 Flow 的一些体验
|
10月前
|
架构师 Linux Docker
三分钟让Dify接入Ollama部署的本地大模型!
本文详细介绍了如何在 Dify 中接入 Ollama 模型,包括模型添加、参数配置及常见问题解决。通过运行 Ollama 服务并与 qwen2:0.5b 模型交互,实现本地化大模型应用开发。同时提供了 Docker、Mac、Linux 和 Windows 平台上 Ollama 的部署与环境变量设置指南,帮助开发者快速上手。更多实战技巧可访问[编程严选网](http://www.javaedge.cn/)或关注作者的 Github 仓库。
6764 2
三分钟让Dify接入Ollama部署的本地大模型!
|
搜索推荐 网络架构 开发者
Next.js静态出口生成策略深度解析
【7月更文挑战第18天】Next.js凭借其强大的静态生成、静态出口生成以及服务器端渲染功能,为开发者提供了构建高性能、高SEO友好Web应用的强大工具。
|
机器学习/深度学习 数据采集 人工智能
使用Python和Scikit-learn实现机器学习分类任务
使用Python和Scikit-learn实现机器学习分类任务
484 1
|
Web App开发 缓存 自然语言处理
60 个神级 VS Code 插件!(2)
60 个神级 VS Code 插件!(2)
620 0
60 个神级 VS Code 插件!(2)
|
人工智能 自然语言处理 安全
产品更新|宜搭AI助理、精品应用产品力、专属宜搭多项功能升级!
本期功能更新已全量发布,可直接在宜搭内体验。
763 0
产品更新|宜搭AI助理、精品应用产品力、专属宜搭多项功能升级!
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
599 1
|
域名解析 缓存 运维
堡垒机轻量版在网页运维时提示连接中断
堡垒机轻量版在网页运维时提示连接中断
495 1