div+css相对定位和绝对定位用法实例详解

2024-07-11 08:50:19

字体：大中小

来源：转载

供稿：网友

在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，比如CSS相册等等，因此自己杂乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转DIV+CSS定位时，我就已是高手了。不管你怎么想，我只希望下面的教程能让你更深入地了解CSS定位属性。

1.定位的专业解释
(1)语法
position:static|absolute|fixed|relative
从上面语法可以看出，定位的方法有很多种，它们分别是静态(static)，绝对定位(absolute)，固定(fixed)，相对定位(relative)。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位(absolute)、相对定位(relative)。
(2)说明
相对定位(relative)：相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

复制代码

上一篇：在IE6/7/8下识别html5标签(让老式浏览器识别html5)

下一篇：Div设置最小宽度(有浮动元素或浏览器宽度小于1350之后)