1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会以最近一个定位的父对象为参考点,。margin-left则不用设position也可以用。

2,通常情况下,我们元素的position属性的值默认为static 就是没有定位,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,z-index属性这时也不会有效。

3,对某元素设置了相对定位,它移动后仍占据着原来的空间,不会被其他块填补掉,它的偏移也不会把别的块从文档流中原来的位置挤开,会叠在其他元素之上,可用z-index调。

被设置了绝对定位的元素不占空间,原位置被删除,也可用z-index来设置它们的堆叠顺序。

4,设置为相对定位的元素,会相对于它的起点进行移动。

    设置为绝对定位的元素,绝对定位是“相对于”最近的已定位(非static,即relative,absolute或fixed)祖先元素,如果不存在已定位的祖先元素,那么会“相对于”<body>进行定位,例如设置了top:20,right:30,那元素就会离顶部20,离右边界30,,这里的margin和padding没清零,所以看着top比right大。

5,当两个元素设为relative时,后一个能覆盖到前一个上,前一个不会动。

第一个设了relative,第二个设了absolute,情况与上同。

第一个设为relative,第二个不设,情况上同。

第一个设为absolute,第二个设为relative,情况与上同。

第一个设为absolute,第二个设为absolute,上同,能覆盖且以body为基准。

第一个设为absolute,第二个不设,第一个移位了后,第二个会把原第一个元素的位置占掉,可能会与第一元素重叠。

以下摘录了一段总结:

position的relative和absolute属性要搭配来用,但是当我们布局的时候,尽量不要用position属性来进行定位,用position确实爽,能霸道地直接把元素移动到浏览器显示区域的任何位置,但是这破坏了网页设计的布局嵌套,而且你会发现,用position霸道的改动位置设计出的布局,在浏览器放大缩小的时候,元素就全都乱套了,发生很多错位现象。我们在网页的布局时了,最基本的margin,float一些属性已经可以应付90%的布局情况了,能不用position就不用position,当我们想要耍无赖的时候,比如在页面滚动的时候,始终在浏览器的固定位置显示一个广告窗口(用position:fixed来实现),或者在点击元素跳出弹窗遮盖其他页面元素只允许在弹窗上操作时(用positionLabsolute实现),才会用到position属性,否则,滥用position只会造成页面结构的混乱
--------------------- https://blog.csdn.net/qq_37856300/article/details/82799545 
And :
1,给行内元素绝对定位之后就转化为行内快了。

2,行内元素相对定位后不会转化为行内块。

3,TOP、RIGHT、BOTTOM、LEFT  简称TRBL 。

相对定位和绝对定位 left和margin-left的更多相关文章

  1. 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径

    微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位 ...

  2. css position相对定位与绝对定位彻底搞懂

    定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...

  3. 辛星和你彻底搞清CSS中的相对定位和绝对定位

    前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...

  4. 详解CSS的相对定位和绝对定位(讲得很详细)

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  5. div 的相对定位与绝对定位

    网 上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位.浮动等概念:二是虽然避免了“表格套表格”的缺点,却 带来了“div 套 di ...

  6. WEB学习 -相对定位、绝对定位、固定定位、z-index

    相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. .不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘. 3.相对定位用 ...

  7. CSS——相对定位、绝对定位、固定定位

    相对定位: position:relative 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位 ...

  8. 详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  9. css之position相对定位和绝对定位

    一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...

  10. CSS中相对定位与绝对定位

    看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...

随机推荐

  1. Zuul路由转发规则

    定制的路由规则的主要功能: 1.路由表中包含源路径,微服务名称,目标路径 2.Endpoint粒度配置支持 3.路由支持1对1精确路由 4.源路径可以前缀/**格式来模糊路由 5.目标路径可以使用前缀 ...

  2. sklearn:Python语言开发的通用机器学习库

    引言:深入理解机器学习并全然看懂sklearn文档,须要较深厚的理论基础.可是.要将sklearn应用于实际的项目中,仅仅须要对机器学习理论有一个主要的掌握,就能够直接调用其API来完毕各种机器学习问 ...

  3. C#-MVC开发微信应用(8)--菜单管理的实现

    之前讲解了微信后台管理页面的操作来管理菜单,下面我们在简单的来看一下,代码是如何实现的. 我们要实现获取微信的菜单.创建菜单.删除菜单等操作. 01.首先定义菜单操作的接口: /// <summ ...

  4. redis 的消息订阅和消息队列的功能比较

    消息队列常用的有 rabitMQ.kafka等.缓存服务器  redis 也可以做消息队列使用,他们的特点对比如下 消息协议: 消息队列支持包括AMQP,MQTT,Stomp等,并且支持 JMS 规范 ...

  5. Java日志框架(Commons-logging,SLF4j,Log4j,Logback)

    简介 在系统开发中,日志是很重要的一个环节,日志写得好对于我们开发调试,线上问题追踪等都有很大的帮助.但记日志并不是简单的输出信息,需要考虑很多问题,比如日志输出的速度,日志输出对于系统内存,CPU的 ...

  6. 把上传过来的多张图片拼接转为PDF的实现代码

    以下是把上传过来的多张图片拼接转为PDF的实现代码,不在本地存储上传上来的图片,下面是2中做法,推荐第一种,把pdf直接存储到DB中比较安全. 如果需要在服务器上存储客户端上传的文件时,切记存储文件时 ...

  7. 编译错误 ld: cannot find -lz

    [时间:2017-04] [状态:Open] [关键词:makefile,gcc,linux,ld,libz.so] 在新安装的centos上编译程序遇到上述问题,找了半天,原来是没有安装 需要安装z ...

  8. Node入门教程(10)第八章:Node 的事件处理

    Node中大量运用了事件回调,所以Node对事件做了单独的封装.所有能触发事件的对象都是 EventEmitter 类的实例,所以上一篇我们提到的文件操作的可读流.可写流等都是继承了 EventEmi ...

  9. Entity Framework定义外键,限制通过migration命令自动更改字段名称

    1.问题 在定义一个表的外键时,通过add-migration命令生成,并通过update-database更新到数据库,发现外键名称发生了重命名.举例说明: 人员表[User](Id,Name,Pa ...

  10. mininet下建立拓扑时关于远程控制器的一个小问题

    最近重装了系统和mininet后,使用mininet时遇到了一点小问题,一开始忽视了细节,使得自己被这个问题困扰了好一会儿,好在后来还是发现了问题所在,故记录下来. $ sudo mn --topo ...