Css定位总结

CSS position

 
static

默认值,没有定位。元素框正常生成。块级元素生成一个矩形框,作为文档流(normal flow)的一部分,行内元素则会创建一个或多个行框,置于其父元素中。top,right,bottom,left,z-index属性无效。

    W3C这样描述:    

 z-index:
Only works on positioned elements(position: absolute;, position: relative; or position: fixed.  
          
relative
    元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
    relative就是对默认static定位的相对偏移,也就是说如果top、left都设0,那么此时的relative就跟static基本相同了,否则的话就在static的基础上进行相对偏移。relative的一个重要用处是给设置绝对定位的子元        素确定一个“父容器”。相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
 

absolute

    元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
 
 
总结:
  1. static是在normal flow中,原有的位置保留,top,right,bottom,left,z-index属性均无效,而在relative,absolute,fixed这些属性均有效。
  2. absolute,fixed均不在normal flow中,原有位置不保留,absolute与fixed的区别是包含块,前者的包含块是第一个非static的祖先元素,后者的的包含块是视窗本身。
  3. relative就是对默认static定位的相对偏移,在normal flow(非浮动)中,原有的位置保留。relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。

包含块

怎么确认一个元素的包含块?
  • 根元素:
    • 根元素包含块由用户代理建立。在html中,根元素是html 元素,有些浏览器的也会用body做为根元素。大多数浏览器中,初始包含块是一个视窗大小的矩形。
  • 非根元素:
    • relatice 、static:块级祖先元素
    • absolute:非static的祖先元素
    • float:块级祖先元素
    • Fixed:viewport
  • 如果找不到定位的祖先元素,包含块为初始包含块。
 
 

浮动

 

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档    的普通流中的块框表现得就像浮动框不存在一样。

浮动框特点:

  • 浮动会从正常的流中消失
    • 但是一个元素或图像浮动时,其它内容会环绕该元素。
  • 浮动元素的外边距不会合并。(BFC)
  • 浮动元素的包含块是其最近的块级祖先元素。
  • 浮动会生成块级框,无论这个元素原来是什么
  • 浮动的边界不会超过父边界,除了设置负外边距
  • 浮动的边界一定是另外一个浮动元素或父元素的边界.
  • 浮动不会重叠。(BFC)
上一篇:C#添加文字水印


下一篇:【刷题】BZOJ 4916 神犇和蒟蒻