相对定位和绝对定位 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 。

 

转载于:https://www.cnblogs.com/Isabel4u/p/6837657.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值