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

关于position的小总结

position:relative/absolute/fixed/static  ......

relative:相对定位。 脱离标准流,相对自己原来(标准流)的位置定位。
absolute:绝对定位。 脱标不占位,相对body定位、子绝父相、......
fixed:相对于窗口定位。固定定位。
static:默认值。无特殊定位,对象遵循标准流。

实例-在窗口中垂直居中定位:

div{
  width:500px;
  height:500px;
  position:fixed;
  left:50%;
  margin-left:-250px; //(负的宽度的一半)
  top:50%;
  margin-top:-250px;
}

 

在CSS中关于position定位的内容:
position: relative | absolute | static | fixed

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

 

CSS中定位的层叠分级:z-index: auto | namber;
auto 遵从其父对象的定位
namber 无单位的整数值。可为负数

relative(相对定位)只可以在文本流中进行位置的上下左右的移动,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位。

absolute(绝对定位)不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT简称TRBL)来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。

 

关于position:

1. position:static
所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。
一般来说,不用指定 position:static,除非想要覆盖之前设置的定位(也就是说,不继承父容器的position属性值!!!)。

2. position:relative
如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。
意思是元素实际上依然占据文档中的原有位置,只是上相对于它在文档中的原有位置移动了。

3. position:absolute
当指定 position:absolute 时,元素就脱离了文档(即在文档中已经不占据位置了),可以准确的按照设置的 top,bottom,left 和 right 来定位了。

4. position:inherit (值)属性:
inherit故名思意是“继承”的意思。所以它所表达的值也是继承相关的了。
通过在特定元素上设置某些样式来告诉该元素 “继承”它父级元素的所有已添加的属性,这样你就可以避免相当多的键盘输入。
  这可以通过设置 inherit 来很容易的实现。比如,当重写 background 属性的时候,常常会有很多的文字在该属性中(色彩、图片的URL地址、位置等)。所以,与其重新写这些值,你可能仅仅想要考虑中的元素和其父级元素有相同 的背景属性,一个 inherit 值就可以搞定一切——这显然大大的节省了键盘输入。

很可惜的是inherit 值在IE6和IE7不被支持(除了用于 direction (文字方向) 和 visibility 属性)。

 

转载于:https://www.cnblogs.com/xiangru0921/p/6500986.html

相关文章:

  • 《剑指offer》二叉树镜像
  • 走向全栈之MongoDB的使用
  • RN开发之如何升级自己的本地RN项目
  • Android 倒计时的五种实现方式
  • Linux运维工程师如何找一份好工作?
  • 编码小结2
  • Nginx | 负载均衡(一)
  • VS链接错误: LNIK1123
  • Angular 2 DI - IoC DI - 1
  • 百度地图API标注+时间轴组件
  • Hinton神经网络公开课2 The Perceptron learning procedure
  • vs2017常用扩展
  • Hibernate MySQL Timestamp查询时遇到的转换问题
  • IOS开发-KVC
  • 关于FPS游戏痕的问题
  • 【Amaple教程】5. 插件
  • 【跃迁之路】【519天】程序员高效学习方法论探索系列(实验阶段276-2018.07.09)...
  • Git初体验
  • Java基本数据类型之Number
  • Less 日常用法
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 分类模型——Logistics Regression
  • 关于使用markdown的方法(引自CSDN教程)
  • 配置 PM2 实现代码自动发布
  • 如何设计一个微型分布式架构?
  • 详解NodeJs流之一
  • 赢得Docker挑战最佳实践
  • 智能网联汽车信息安全
  • UI设计初学者应该如何入门?
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • ​你们这样子,耽误我的工作进度怎么办?
  • "无招胜有招"nbsp;史上最全的互…
  • #!/usr/bin/python与#!/usr/bin/env python的区别
  • (145)光线追踪距离场柔和阴影
  • (WSI分类)WSI分类文献小综述 2024
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (力扣记录)1448. 统计二叉树中好节点的数目
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (续)使用Django搭建一个完整的项目(Centos7+Nginx)
  • (一)80c52学习之旅-起始篇
  • (转)我也是一只IT小小鸟
  • . NET自动找可写目录
  • .NET BackgroundWorker
  • .NET Core MongoDB数据仓储和工作单元模式封装
  • .NET 的程序集加载上下文
  • .net通用权限框架B/S (三)--MODEL层(2)
  • .NET中使用Protobuffer 实现序列化和反序列化
  • @软考考生,这份软考高分攻略你须知道
  • [3D基础]理解计算机3D图形学中的坐标系变换
  • [BeginCTF]真龙之力
  • [BZOJ 1032][JSOI2007]祖码Zuma(区间Dp)
  • [BZOJ2281][SDOI2011]黑白棋(K-Nim博弈)