面向初学者谈谈position

短命女 2022-06-13 09:07 159阅读 0赞

position毫无疑问属于css2中比较重要的元素之一，懂得如何很好地使用它可以节省在美工上所消耗的时间和精力，但对于初学者来说，position有时也是那么地难于驾驭，所以今天我来谈谈position，只面向初学者。

position中有4个值，分别为**static | absolute | fixed | relative**，从这4词表面的意思来看，一目了然，我们知道static是静态的，absolute是绝对的，fixed是固定的，relative是相对的，所以从4个词的表面意思来看，很多的高手马上就可以用了，但对于有些初学者来讲，还需要别人指点一下才能运用，不过初学者也不要灰心，大牛都是从初学者一步步走过来的。

先来谈一下static，这个词其实没什么好说的，意思也很明确，你用它和不用它效果是一样的，在css样式修饰中，position默认的值就是static，所以这里就不去追究它的用法了，你可以忽略它，要是你觉得手痒，你也可以把它加进去，对你来说并不会也什么损失的，对浏览器的速度来说，也相差毫厘；今天重点是来谈谈absolute，这个词很有意思，它的用法也很精髓，我们先给出一段代码：

</div>

这段代码很简单，大家一眼就可以知道什么效果了，但有些时候我们需要将boia wang这段文字覆盖到图片之上，我们该怎么做呢？设计师就会大摇大摆地使出PS这个超牛软件，经过PS后文字显然加到了图片的上面，但是我们在美工上面会花掉多少时间呢？我没有计算过，但我知道如果用代码去解决它，应该会节省下来很多时间的，那么我们该怎么做呢？用代码去解决它其实有一些方法的，有一种就是将图片设置为背景图片，background:url(images/demo.jpg) .然后摆弄文字就行了，但今天我们主要是讲如何应用position，所以我们这样做div.son2\{position:absolute;\}然后你在里边加两个元素：分别为left和top，只要乖乖地给他们赋值就ok了，你就可以任意地摆弄文字显示的位置了。

接着来说说fixed，这个词我一直很欣赏，兼容性问题一直困扰着它，但它还是生存下来了，在有些页面中，咱们可以看到有些广告会随着滑动条往下移而追随你下去，我只是打个比喻，因为这些效果不一定是由fixed来处理的，所以要想使son2这个小盒子里的文字随着你滑动条的下移而追随你，你就可以这么做div.son2\{position:fixed;float:right;\}好吧，我只是打个比喻，你采纳或者不采纳，浏览器都不会杀了你的；relative这个就不是太友好了，但他也有作用，他可以使对象不可层叠，假设我们这样做div.son2\{position:relative;left:400px;top:500px;\}；我就不敢保证他会出现什么令你无法想象的问题了，如果你没在父元素上面加上overflow:hidden;的话。

position当然不止我上面所说的这些功能，它还有很多很有意思的玩法，感兴趣的筒子们可以去找些网站来看一下，看看他们里面的position到底都做了些什么，咱们也可以讨论一下，作为初学者来切磋一下。