css中的定位元素
static
默认属性，指定元素按照常规的文档内容流来进行定位。静态定位的元素不能使用top、left和类似其他属性的定位，欲对文档元素使用css定位技术，必先将其position属性设置为除此之外的其他3个属性值
absolute
该值定义元素是相对于包含的元素进行定位。相对于所有其他元素，绝对定位的元素是独立定位的，它不是静态定位的元素中文档流的一部分。它的定位要么是相对于最近的定位祖先元素 ，要么是相对于文档本身的
fixed
该值指定元素是相对于浏览器窗口进行定位的、固定定位的元素总是显示在那儿，不会随着文档其他部分而滚动。类似于绝对定位的元素，固定定位的元素和所有其他元素是独立的，他不是文档流的一部分。大多数现代浏览器支持固定定位
relative
当position设置为relative时，元素按照常规的文档流进行布局，它的定位相对于它文档流中的位置进行调整。系统保留着元素在正常文档流中的空间，不会因为要填充空间而将其各边合拢，也不会将元素从新的位置推开
第三维度：z-index
z-index
属性定义了第三个纬度，它允许指定元素的堆叠次序，并指示两个或多个重叠元素中的哪一个 应该绘制在其他的上面
z-index只对兄弟元素的应用堆叠效果
css定位示范：文本阴影
text-shadow属性在文本下产生阴影效果。许多现在的浏览器都支持该效果，但是 可以使用css定位属性实现类似的效果
css盒模型和定位细节
box-sizing：content-box 标准的盒模型
box-sizing：border-box IE的盒模型，即width和height属性将包含边框和内边距。当想以百分比形式为元素设置总体尺寸，又想以像素单位指定边框的内边距时，边框盒模型特别有用
<div style="box-sizing:border-box ; width: 50% ; padding:10px;border:solid black 2px;">
边框盒模型在未来css3中的一个可选方案时使用盒子尺寸的计算值
<div style="width:calc(50%-12px) ; padding: 10px ; border: solid black 2px;">
元素显示和可见性
visibility ：属性为hidden时，该元素不显示，当其值设置为visible时，该元素显示
display ： none时不显示
visibility属性设置为hidden时，元素不可见，但是在文档布局中仍然保留着空间
display设置为none时，在布局中不会给它分配空间，就当它重来都不存在
颜色、透明度和半透明度
background-color ： 设置背景颜色
opacity：设置透明度，其属性值在0-1之间
部分可见：overflow和clip
overflow指定内容超出元素的大小该怎么显示
visible：默认值。如果需要，内容可以溢出并绘制在元素的边框外面
hidden： 裁剪掉和隐藏溢出的 内容
scoll：元素一直显示水平和垂直的滚动条。如果内容超出元素尺寸，允许用户通过滚动来查看额外的 内容。此属性负责文档在计算机屏幕中的显示
auto：滚动条只在内容超出元素尺寸时显示，不是一直显示的
clip属性指定了应该显示元素的哪个部分，它不管元素是否溢出，clip属性指定了元素的裁剪区域
style="clip:rect(0px 100px 100px 0px);"
rect(top right bottom left)
例如用style属性指定只显示元素最左边100像素
style = "clip: rect(auto 100px auto auto);"