div+css相对定位和绝对定位用法实例详解，2024年你与字节跳动只差这份笔记

CSS 相对定位实例

1.    
2.    
3.  
4.  

   这是位于正常位置的标题

      

5. 这个标题相对于其正常位置向左移动

      

6. 这个标题相对于其正常位置向右移动

      

7. 相对定位会按照元素的原始位置对该元素进行移动。

      

8. 样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。  

9.    

10. 样式 "left:20px" 向元素的原始左侧位置增加 20 像素。  

11.    
12.     
13.    

2.定位的形象解释

我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，这个房间半空中还有不少的钩子用于挂东西用。现在我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。

(1)贡献的绝对定位(absolute)

对照前面解释，如果西瓜被赋予绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它(绝对定位对象会让出自己原先占用位置，所以说它是贡献的)。此时如果之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜还是挂在原来位置，至于西瓜要怎放，则以房间左上角(body左上角)为准，用left，right，top&