新手草根站长做站往往都是使用现成的模版，因此也有了很大的局限性，既不能表达自己想象的布局效果，有没有模版的原创性。想要实现优美站点布局，还是要掌握几个CSS定位属性才行。
CSS定位属性：
◆bottom、left、right和top
◆position
◆clip
◆float
◆clear
◆overflow
◆z-index
该类属性设置元素在父级元素中的位置。在设置这类元素时，如果设置长度数值，均以px作为单位，在通过style对象读取属性时，返回带单位的字符串。
1.bottom，left，right和top
作用:设置元素距离参照元素的底边、左边、右边、顶边的距离。
取值:属性值可以为数值或百分比。数值表示与参照元素之间的距离，单位为像素px;百分比表示参考父元素宽度的百分比。默认值为0。
2.position
作用:决定元素在文档中的定位方式。
取值:可取值包括absolute，relative和static。
absolute表示绝对定位方式。当一个元素A采用绝对定位方式时，则A下的子元素将以A的左上角顶点作为坐标原点进行定位。而对于元素A，浏览器将在元素A所属的子节点树中寻找上一个采用absolute定位方式或者relative定位方式的元素A-P，以A-P的左上角顶点作为参照点确定元素A的位置，如果找不到，则以文档左上角顶点作为参照点。
relative方式指元素相对于其相邻非绝对定位元素的位置进行定位。当将元素A的position属性设置为relative时，A下的子元素将以A的左上角顶点位置作为参照进行定位。对于A的位置，浏览器将寻找与元素A最近的前一个(并不一定是在其子节点树中)position属性不是absolute或者relative的元素，以该元素作为参照确定当前元素A的位置，如果找不到，则以文档左上角顶点作为参照点。在相对定位时，A元素的left属性指相对于参照元素左边的距离，而top指相对于参照元素底边的距离。
static方式为默认方式，表示元素在文档中的位置由网页根据各元素的先后顺序自然排列，此时，元素各位置参数，如left和top均无效。
评论