定位
属性
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底部对齐