定位（相对定位、绝对定位、固定定位）、overflow属性

定位

属性

position

• static 静态定位 （默认值）
• relative相对定位
• absolute绝对定位
• fixed固定定位

配合指定位置的属性(偏移量)

• 水平方向位置

  • left：距左侧的距离
  • right:距右侧的距离

• 垂直方向位置

  • top:距顶部的距离
  • bottom：距底部的距离

相对定位

相对于元素本身原来位置进行定位

• 不定义偏移量时对元素本身基本没有影响
• 不脱离文档流（原来位置仍然占位）
• 提升元素层级
• 通常配合绝对定位使用（作为定位父级）

绝对定位

• 脱离文档流
• 提升元素层级
• 通常配合相对定位使用（作为定位子元素）—— 父相子绝

没有定位父级时，相对于根元素（html）进行定位

有定位父级时，相对于【最近】的定位父级进行定位

固定定位

始终相对于窗口进行定位

• 脱离文档流
• 提升元素层级

实现定位元素的水平垂直居中

方法一：

left:50%;margin-left:负盒子宽度的一半;margin-top:负盒子高度的一半;

方法二

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

• ie7及以下不支持

定位特性

绝对、固定定位

• 脱离文档流
• 提升层级
• 会使未定宽度的块元素适应内容
• 会使行内元素生成一个块级框（支持宽高、垂直方向的padding,margin,line-height…）
• ————————————————————————————————————————
• 包含浮动子元素，高度不塌陷
• 子元素的margin值不会出现传递塌陷问题

相对定位

不定偏移量时基本对元素没有影响（不改变元素本身的特性-但提升了层级）

覆盖关系总结

• 普通元素，(1)结构上靠后的覆盖靠前的，子元素覆盖父元素
• 浮动元素覆盖普通元素（浮动元素之间同上(1)）
• 定位元素覆盖普通、浮动元素 （定位元素之间默认同上(1)）
  • 定位元素之间层级关系可以通过z-index调整

z-index

z轴顺序堆叠顺序（控制定位元素之间的层级关系）

• 默认0

• 取值：不带单位的数值

• 值越大显示越靠上

• 注：从父原则（拼爹）

浮动与定位（fixed,absolute）脱离文档流的区别

• 浮动和定位元素，都会脱离文档流

• 浮动和定位元素，都会使行内元素生成块级框

• 都会使未定宽度的块元素适应内容

  区别：

• 浮动元素是不脱离文本流（文字、图片及其它内联元素产生绕排），定位元素既脱离文档流又脱离文本流

常用其它属性

overflow属性(overflow-x,overflow-y)

当内容溢出时的处理

• visible显示
• hidden隐藏
• scroll显示滚动条
• auto 自动

vertical-align

1） 用于td,th,控制它们内容在垂直方向的对齐方式

2）用于行内元素

• 控制图片与文字垂直方向的对齐方式

  img{
      vertical-align: top;
  }
  

• 控制图片与图片垂直方向的对齐方式（图片也是行内块）

  img{
      vertical-align: middle;
   }
  

  <div class="box">
          <img src="pic1.jpg" alt="" height="100">
          <img src="pic1.jpg" alt="">
   </div>
  

• 行内块与行内块元素之间的对齐方式 （inline-block）

常用值

• baseline默认值 （基线对齐）
• top顶部对齐
• middle居中对齐
• bottom底部对齐