预览加载中，请您耐心等待几秒...

关于CSS的position属性.doc

预览
1/3
2/3
3/3

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

说明 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 可能的值 值描述absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。 元素的位置通过"left","top","right"以及"bottom"属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过"left","top","right"以及"bottom"属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20"会向元素的LEFT位置添加20像素。static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。inherit规定应该从父元素继承position属性的值。 演示： <html> <head> <styletype="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2class="pos_abs">这是带有绝对定位的标题</h2> <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧100px，距离页面顶部150px。</p> </body> </html> 演示图： 相关： HYPERLINK"http://www.awflasher.com/blog/archives/731"\o"PermalinktoCSS中position的absolute和relative的应用"CSS中position的absolute和relative的应用 之前老弄不明白，只能凭借一点短期内“虐出来的经验”制作需要的效果，后来仔细研究了一下Hutia的XScroller，并且仔细看了文档，才知道这个position属性其实是指本体对上级的定位。如果这么理解，就好办了。 默认的属性值都是static，静态。就不用多说了。最关键的是relative（相对）以及absolute（绝对）。往往我们如果是COPY别人的代码，会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为力，后来发现只要把其上一级的样式属性position设置为relative就可以了。 也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。例如如下A-B的嵌套结构 <divid="A"> <divid="B"> </div> </div> 当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。 这样在开发一些基于B/S应用程序的时候，就能很方便的添加一些UI元素，例如某一个活动层的关闭按钮等。