您当前位置：首页 > web前端 > htmlcss > Css中position与background-position属性详解

Css中position与background-position属性详解

来源：程序员人生发布时间：2013-10-31 06:53:18 阅读次数：2982次

写css样式表也有很长时间了，但是有些css样式的属性还是会出现一些问题。比如说过去写css样式的时候对于position属性几乎不太用。相对来说也是比较陌生的。各个浏览器的不同解析结果也是一个大问题。写这篇文章和大家一起来深入的学习一下position属性的用法以及background-position属性的用法。

Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中，Position属性发挥着非常重要的作用，很多容器的定位是用Position属性来完成。

先来看一CSS样式表中的Position属性有以下几个值：static，relative，absolute，fixed。

Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。

Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。

Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。请特别注意，IE6不支持CSS中的position:fixed属性。

用一个小实列来说明：
代码部分：
<style>
.fl{float:left; width:60px; background:#99CCFF; border:#CCCCCC solid 1px; height:20px; margin-left:10px; text-align:center}
</style>
<body>
<div>
<div class="fl" style="position:static; top:20px; left:50px;">百度</div><div class="fl">google</div> <div class="fl">sina</div> <div class="fl">firefox</div>
</div>
</body>
你也以看一上运行结果，分别将position:static替换为relative，absolute;来查看效果图。

注意：很多网页都是居中的，这样，当对元素进行绝对定位的时候，在不同的分辨率下显示会有偏差，这时，我们可以通过类似下面的方法来处理：

<div style="position: relative;">

<div style="position: absolute; top: 10px; left: 10px;"></div>

</div>
最后来讲讲background-position属性；background-position属性是来确定背景图片的位置。Background-position:center 25px;这代表什么意思呢？是指背景图片居中显示，而且与顶部的距离是25个象素。当然也可以设置其它的值。然后我们用一个小小的css样式实例来说明一下：
<style>body{ BACKGROUND:url(images/bg.png) repeat-x;}
.totbg{BACKGROUND-POSITION:center 25px;
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-IMAGE:url(http://images.cnblogs.com/baiyjkbg.png);} </style>
<body>
<div class="totbg"></div>
</body>
简单说明一下：BACKGROUND:url(images/bg.png) repeat-x;是表示整个body页面的背景是bg.png,并且水平重复。 .totbg{BACKGROUND-POSITION:center 25px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-IMAGE:url(http://images.cnblogs.com/baiyjkbg.png);}表示整个最外层div的背景所在的位置并且不重复循环。如果你不想让背景跟随滚动条动的话也可以这样在以上样式表中加入background-attachment:fixed;。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 Sql Server 查询列名不为某名的列

下一篇 网上创业：小网商“名声大震”的秘笈

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点