博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 定位position总结
阅读量:5862 次
发布时间:2019-06-19

本文共 2662 字,大约阅读时间需要 8 分钟。

在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之。

CSS position 属性值:

  • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
  • fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
  • static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • inherit:规定应该从父元素继承 position 属性的值。

我们最常用的的就是 absolute 和 relative 两种方式,所以主要讨论着两者的区别。

relative 相对定位

相对定位我们主要是要知道相对于谁来进行偏移的?其实相对定位是相对于元素自己的本身的位置,我们来看一下例子: 

      

这是一个嵌套的DIV,一个父Div Parent, 包含两个子DIV Sub1 和 Sub2,由于两个子DIV没有设置任何Position属性,它们处于它们应当的位置。默认位置如下图:

当我们修改一下Div Sub1 的样式: 

#sub1{
width: 100px; height: 100px; background-color: blue; position: relative; top: 15px; left: 15px; }

 结果如下图:我们会发现Sub1进行了偏移,并不影响Sub2的位置,同时遮盖住了Sub2,切记偏移并不是相对于 Div Parent的,而是相对于Sub1 原有的位置。

如果我们把Sub1 的同级Div Sub2 也设置一个相对位置,会产生什么结果?我们来看一下。

#sub2{
width: 100px; height: 100px; background-color: red; position: relative; top: 10px; left: 10px; }

结果如下图:

Sub2也根据原有位置进行了偏移,同时遮盖住了Sub1,也不会影响Sub1的位置。相对定位比较容易理解,我们再来看一下绝对定位Absolute。

absolute 绝对定位

绝对定位在使用当中比较容易出错的,有几个需要注意的地方,将上面的代码还原,我们为Sub1 增加一个绝对定位。

#sub1{
width: 100px; height: 100px; background-color: blue; position: absolute; top: 15px; left: 15px; }

结果如下:

我们发现,由于我们对Sub1进行了绝对定位,Sub1的位置发生了偏移,而同级Div Sub2,则占据了Sub1的位置,并且Sub1遮挡了Sub2.

下面,把Sub2 也增加绝对定位:

#sub2{
width: 100px; height: 100px; background-color: red; position: absolute; top: 10px; left: 10px; }

结果如下:

我们会发现,Sub2 也进行了偏移,并且遮盖住了Sub1。

这时候,我们会发现问题,两个子Div 都设置了 绝对定位,他们是相对于哪个元素发生了偏移呢?

这分两种情况:

 1、如果Sub1 的父元素或者祖父元素,设置了Position属性,并且属性值为 absolute 或 relative的时候,那么子元素相对于父元素来进行定位。比如我们例子中最外层Div Parent设置了相对定位属性,因此Sub1 和 Sub2 两个Div 就根据 Div Parent 来进行定位。但是根据Parent那个定位点进行定位呢?答案是:如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位。

2、如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位。

我们将例子中的Parent 的Position 属性删除,再来看一下结果:

由于两个子div没有找到有Position属性的父元素,则以Body进行定位,由于图片原因,请不要误以为是相对于Parent的。

 fixed 定位方式

 fixed是一种特殊的absolute,fixed总是以body为定位对象的,按照浏览器的窗口进行定位。我们将代码还原到最初状态,Sub1 增加absolute定位方式,而Sub2 增加fixed定位方式:

#sub1{
width: 100px; height: 100px; background-color: blue; position: absolute; top: 15px; left: 15px; } #sub2 { width: 100px; height: 100px; background-color: red; position: fixed; top: 5px; left: 5px; }

结果如下:

会发现Sub2 始终以body 进行定位,而Sub1由于发现Parent 有position属性relative,则根据父元素进行定位偏移。

注意fixed 在IE 低版本中式不支持的,包括IE6

至于 static 和 inherit 两种定位,项目中很少用到,static 就是Position属性的默认值,一般不设置position属性时,会按照正常的文档流进行排列

转载于:https://www.cnblogs.com/Mr-liyang/p/6645850.html

你可能感兴趣的文章
Mockplus教程:分分钟搞定APP首页原型设计
查看>>
Maven搭建私服
查看>>
Flink 的新方向在哪里?这场顶级盛会给出了答案
查看>>
浅解比 SQL 更好用的 SPL(二)
查看>>
thrift之TTransport层的堵塞的套接字I/O传输类TSocket
查看>>
jmeter内对response值的处理
查看>>
Wekan 2.55 发布,支持中文的 JavaScript kanban
查看>>
問題紀要 2017.3.21
查看>>
SSO 单点登录总结(PHP)
查看>>
JPA JPQL/持久化查询语言
查看>>
[Scala]Scala学习笔记四 类
查看>>
ZooKeeper分布式入门实战(一)-基本安装配置等
查看>>
阿里云湖北授权服务中心分享如何配置安全组
查看>>
《Java8实战》-读书笔记第一章(02)
查看>>
英特尔AI技术落地场景,保护动物+修缮文物全部统统搞定
查看>>
金雅拓凭借最佳多重身份验证解决方案荣膺2016年网络安全卓越奖
查看>>
Mycat读写分离笔记
查看>>
Java管理Cookie增删改查操作。
查看>>
How to incrementally migrate DynamoDB data to Table Store
查看>>
Hbase伪分布式
查看>>