当前位置: 首页 > news >正文

直接写position:absolute,后面不加top和left等值,是什么意思?分两种情况

href:https://blog.csdn.net/cherry_vicent/article/details/41778501

用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。

这就要用到Position属性等。

 

Position属性有四个值:static、fixed、absolute和relative,

 

后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,

即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,

而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

 

ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。

但是,怎么个绝对法,又怎么个相对法呢?

以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。

今天我特意测试了一下,得出了以下结论:

 

1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持

原来的位置

Top的值表示对象相对原位置向下偏移的距离

bottom的值表示对象相对原位置向上偏移的距离, 两者同时存在时,只有Top起作用。

left的值表示对象相对原位置向右偏移的距离

right的值表示对象相对原位置向左偏移的距离, 两者同时存在时,只有left起作用。

 

2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替

上来

Top的值表示对象上边框与浏览器窗口顶部的距离

bottom的值表示对象下边框与浏览器窗。口底部的距离两者同时存在时,只有Top起作用;

如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。

left的值表示对象左边框与浏览器窗口左边的距离

right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;

如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。 

 

在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,

或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位

将会变成相对父对象定位,这对精确定位是很有帮助的。

转载于:https://www.cnblogs.com/purple1/p/8922697.html

相关文章:

  • 创建镜像iso文件
  • 深入理解HashMap底层原理剖析(JDK1.8)
  • 软件测试--测试用例
  • 【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器
  • .NET Core 网络数据采集 -- 使用AngleSharp做html解析
  • SQL SERVER全面优化-------写出好语句是习惯
  • IIS PHP
  • Lsyncd - 实时文件同步工具(精译)
  • oo第二次博客作业
  • react 进行时
  • Spark2.1.0之运行环境准备
  • 静态路由与扩展ACL配置
  • 路由器DHCP服务、VTP、SHRP和PVST+生成树的配置实验
  • 这套方法论,彻底终结MySQL同步延迟问题
  • 云栖大讲堂Java基础入门(三)- 阿里巴巴Java开发手册介绍
  • [译] React v16.8: 含有Hooks的版本
  • 【前端学习】-粗谈选择器
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • co.js - 让异步代码同步化
  • JS数组方法汇总
  • pdf文件如何在线转换为jpg图片
  • vue数据传递--我有特殊的实现技巧
  • XML已死 ?
  • 给github项目添加CI badge
  • 关于使用markdown的方法(引自CSDN教程)
  • 浏览器缓存机制分析
  • 译自由幺半群
  • 自定义函数
  • ​​​​​​​ubuntu16.04 fastreid训练过程
  • ​iOS安全加固方法及实现
  • ​MySQL主从复制一致性检测
  • $GOPATH/go.mod exists but should not goland
  • (02)Hive SQL编译成MapReduce任务的过程
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (三维重建学习)已有位姿放入colmap和3D Gaussian Splatting训练
  • (十八)用JAVA编写MP3解码器——迷你播放器
  • (四)Android布局类型(线性布局LinearLayout)
  • ./和../以及/和~之间的区别
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .net redis定时_一场由fork引发的超时,让我们重新探讨了Redis的抖动问题
  • .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?
  • .NET/C# 避免调试器不小心提前计算本应延迟计算的值
  • .NET下的多线程编程—1-线程机制概述
  • .NET运行机制
  • .sys文件乱码_python vscode输出乱码
  • [1181]linux两台服务器之间传输文件和文件夹
  • [28期] lamp兄弟连28期学员手册,请大家务必看一下
  • [AIGC] SQL中的数据添加和操作:数据类型介绍
  • [BZOJ4566][HAOI2016]找相同字符(SAM)
  • [C]编译和预处理详解
  • [C++]高精度 bign (重载运算符版本)
  • [CareerCup] 2.1 Remove Duplicates from Unsorted List 移除无序链表中的重复项
  • [Deepin 15] 编译安装 MySQL-5.6.35
  • [Git].gitignore失效的原因