相对定位和绝对定位 left和margin-left
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的更多相关文章
- 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径
微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位 ...
- css position相对定位与绝对定位彻底搞懂
定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...
- 辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...
- 详解CSS的相对定位和绝对定位（讲得很详细）
详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...
- div 的相对定位与绝对定位
网 上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位.浮动等概念:二是虽然避免了“表格套表格”的缺点,却 带来了“div 套 di ...
- WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. .不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘. 3.相对定位用 ...
- CSS——相对定位、绝对定位、固定定位
相对定位: position:relative 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位 ...
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- css之position相对定位和绝对定位
一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...
- CSS中相对定位与绝对定位
看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...
随机推荐
- Windows Media Player 的文件格式支持情况
唔,官方文档:https://support.microsoft.com/zh-cn/help/316992/file-types-supported-by-windows-media-player ...
- 第三部分：Android 应用程序接口指南---第二节：UI---第十二章 自定义组件
第12章 自定义组件 Android平台提供了一套完备的.功能强大的组件化模型用于搭建用户界面,这套组件化模型以View和 ViewGroup这两个基础布局类为基础.平台本身已预先实现了多种用于构建界 ...
- Vert.x 示例
//filename: MainVerticle.java package io.vertx.guides.wiki; import io.vertx.core.AbstractVerticle; i ...
- Git 合并多次 commit 、 删除某次 commit
Git 合并多次 commit 有时候在一个分支的多次意义相近的 commit,会把整个提交历史搞得很混乱,此时可以将一部分的 commit 合并为一个 commit,以美化整个 commit 历史, ...
- Spring自动扫描无法扫描jar包中bean的解决方法（转）
转载自:http://www.jb51.net/article/116357.htm 在日常开发中往往会对公共的模块打包发布,然后调用公共包的内容.然而,最近对公司的公共模块进行整理发布后.sprin ...
- debian/deepin 15.3 15.4安装jdk 1.7 （或jdk 7）,配置默认环境
一.前言 Deepin 15.3是基于Debian开发的,安装jdk 1.7有所不同,默认是openjdk-8-jdk,而我们玩一些编译需要的是jdk 7. 所以本文给出安装JDK 7的教程. Dee ...
- Wifi 开放系统认证和共享密钥身份认证
记录开放系统认证和共享密钥认证的区别. 开放系统身份认证(open-systern authentication) 是802.11 要求必备的惟一方式. 由行动式工作站所发出的第一个帧被归类为auth ...
- springcloud-04-自定义ribbon的配置方式
在dubbo项目中, zookeeper即注册中心帮我们实现了调度和负载均衡的能力, 这种方式被称为服务器端的负载均衡, springcloud中, 使用ribben实现的客户端负载均衡 什么是rib ...
- react中实现搜索结果中关键词高亮显示
网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换. react中实现起来似乎更简单一些. 我这里的需求是通过搜索框搜索出新闻列表,在 ...
- [UFLDL] *Train and Optimize
Deep learning:三十七(Deep learning中的优化方法) Deep learning:四十一(Dropout简单理解) Deep learning:四十三(用Hessian Fre ...