css布局定位（position + display）

css元素定位

• 块级元素与行内元素
• absolute、relative、fixed与static定位

块级元素即div、h1 、p等元素，在整个页面中相当于一块区域，其内部元素垂直布局。而行内元素则是strong、span等元素，相当于行区域，其内部元素水平布局。这也是为什么span元素内不能嵌套div元素的原因。可以使用css的display改变元素的框类型：

/*改变span为块级元素*/
span{
 display:block;
}
/*改变div元素为行内元素，使其内部元素水平布局*/
div{
display:inline;
}
/*隐藏某个区块内的所有内容，不占文档空间*/
#myDiv{
display:none;
}

css的不同定位方式：

定位方式	作用
static	默认的定位方式
relative	相对布局，较为简单，设置时建议仅使用top与left对其设置如left：20px，top：10%，则表示相对于原来位置往右偏移20px，向下偏移父容器高度的10%。
fixed	固定定位，相对于整个界面的设计，最常用于导航栏。不占文档空间，所以其同级元素使用aligin进行定位时将失败。
absolute	绝对定位，不占文档空间，其定位相当于对最近的已定位父级元素定位

注：aligin-*为相对于同级文档元素进行定位，top、bottom、left、right等则对于不同定位方式有不同含义。absolute与fixed两种方式均不占文档空间，所以可能造成空间重叠，可用z-index进行设置。