CSS定位position

定位模型

static自然模型(静态定位)

relative相对定位模型

absolute绝对定位模型

fixed固定定位模型

sticky磁贴定位模型

 

top|bottom|left|right|z-index  上下左右的边距和层叠顺序

 

div.block*4按回车键则
 
  
  
  

 

一、position之static

CSS定位position_第1张图片

 

 代码如下(给每个子元素设置relative相对定位,然后给第二个子元素设置static静态定位)




  
  
  
  Document
  


  
A
B
C
D

效果如下:

CSS定位position_第2张图片

 

 注:这里B元素10px的偏移就没了,因为设置了static定位,会把它置回原来的自然流中

 

 

二、position之relative

别人用来做定位的一个标杆参照物

CSS定位position_第3张图片

 

 代码如下:




  
  
  
  Document
  


  
A
B
C
D
  

效果如下:

CSS定位position_第4张图片

 

 注:给第二个子元素设置了relative相对定位,是相对于原来自己在常规流中做一个偏移,

相对定位的元素不会离开常规流,具体可以看这里,虽然这里B偏移了,但是代码中A和C之间还是有B的宽和高的,也即B的空间还是预留的,就像北漂,虽然人在外面,但是在家乡还是有自己的一亩三分地的。

 

 

代码如下(使浮动元素发生偏移并设置他们的堆叠顺序)




  
  
  
  Document
  


  
A
B

 

效果如下:

 

 

 

三、position之absolute

CSS定位position_第5张图片

 

代码如下(设置第二个子元素为absolute绝对定位)




  
  
  
  Document
  


  
A
B
C

效果如下:

CSS定位position_第6张图片

 

 注:如果说relative相对定位相当于出去北漂,家里还有一亩三分地,还给B保留了原来的大小尺寸,那么absolute绝对定位就相当于出去北漂,家乡什么都没有,背水一战

如果给第二个子元素B设置width:50%;那么效果如下:

CSS定位position_第7张图片

 

 注:这里的百分比是相对于谁呢?相对的是最近的定位祖先元素,这段代码中是没有最近的祖先元素的,那么就会认做爸爸。所以这里的宽度是整个body宽度的一半。

 

代码如下(任何元素都可以设置为relative,它的绝对定位的后代都可以相对于它进行绝对定位)




  
  
  
  Document
  


  

效果如下:

CSS定位position_第8张图片

 

 注:绝对定位实际中用的最多,在广告中特别常用,因为它只是绝对于它相对的元素。因为有些设计需求是说必须固定在某某块旁边,那就把那个块设置为relative,把要固定的块设置为absolute

 

 

 四、position之fixed(不会随着视口的滚动而滚动,应用于很多弹出来的小广告等等)

CSS定位position_第9张图片

 

 五、position布局之sticky(这个因为涉及的比较复杂,就没有具体举例子了,后续如果有时间会专门补齐这块)

CSS定位position_第10张图片

 六、position定位总结(思维导图)

CSS定位position_第11张图片

 

 

你可能感兴趣的:(CSS定位position)