CSS定位

display属性可以用来改变生成框的类型，例如将属性设置为block，可以让行内元素表现的像块级元素，而如果将display设置为none，则让生成的元素根本没有框。这样该框及其所有内容就不会显示。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

<div>
some text
<p>Some more text.</p>
</div>

css有三种基本的定位机制：普通流，浮动和绝对定位
除非专门指定，否则所有框都在普通流中定位。

css position属性:
static
relative   相对定位
absolute   绝对定位
fixed    固定定位

h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}

相对定位会按照元素的原始位置对该元素进行移动。
样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。
样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}

<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>

overflow: scroll;
这个属性定义溢出元素内容区的内容会如何处理。
如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。
如果值为hidden，则会隐藏溢出的内容
如果值为auto，则会交给浏览器来自动处理溢出

设置元素形状
clip属性
rect(top,right,bottom,left)
clip:rect(0px 50px 200px 0px)

垂直排列图像
vertical-align的值：
text-top 元素顶端对齐字体顶端
middle 元素放置在父元素的中部
bottom 元素顶端对齐最低元素顶端
text-bottom 元素底端与字体底端对齐

设置元素的堆叠顺序 z-index
拥有更高堆叠顺序的元素总是处于堆叠顺序较低的元素前面
z-index的默认值是0,如果z-index是-1则会被置于另一元素之后