相对定位和绝对定位 left和margin-left

比眉伴天荒 2021-09-29 02:50 397阅读 0赞

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，![1147662-20170515171235072-962084784.png][]，这里的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

[1147662-20170515171235072-962084784.png]: /images/20210726/7fbc51d12d994f67993889e986da01bd.png