欢迎光临
桂林SEO博客

定位布局主要分为哪几种

浮动布局比较灵活,但是不容易控制。而定位布局的出现,使得用户精准定位页面中的任意元素成为可能,页面布局操作变得更加随心所欲。当然由于定位布局缺乏灵活性,也给空间大小和位置不确定的版面布局带来困惑。因此,在网页布局实战中,大家应该灵活使用这两种布局方式,满足个性设计需求。

定位布局主要分为哪几种

定位布局主要分为哪几种

CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动,能够创建多种高级而精确的布局。

布局定位共有4种方式:

  1.   固定定位(fixed)
  2.   相对定位(relative)
  3.   绝对定位(absolute)
  4.   静态定位(static)

  1.固定定位fixed

在CSS中,固定定位是最直观且最容易理解的定位方式。先来介绍固定定位,让大家感受一下定位布局是怎样一回事。

当元素的position属性设置为fixed时,这个元素就被固定了,被固定的元素不会随着滚动条的拖动而改变位置。在视野中,固定定位的元素的位置是不会改变的。这个效果,跟绿叶学习网右下角的回顶部特效是一样的。

  语法:

position:fixed;

top:像素值;

bottom;像素值;

left:像素值;

right:像素值;

  说明:

“position:fixed;”是结合top、bottom、left和right这4个属性一起使用的,其中“position:fixed;”使得元素成为固定定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

top、bottom、left和right这4个属性不一定全部都用到。注意,这4个值的参考对象是浏览器的4条边。

在CSS入门学习中,我们建议初学者使用像素为单位。

  2.相对定位relative

采用相对定位的元素,其位置是相对于它的原始位置计算而来的。在CSS中,相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。采用相对定位的元素会获得相应的空间。

  语法:

position:relative;

top:像素值;

bottom:像素值;

left:像素值;

right:像素值;

  说明:

“position:relative;”是结合top、bottom、left和right这4个属性一起使用的,其中“position:relative;”使得元素成为相对定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对原始位置的距离。相对定位的容器浮上来后,其所占的位置仍然留有空位,后面的无定位元素仍然不会“挤上来”。

在这里要非常清楚这一点:默认情况下,CSS相对定位元素的位置是相对于原始位置而言,而CSS固定定位元素的位置是相对浏览器而言!

  3.绝对定位absolute

当元素的position属性值为absolute时,这个元素就变成了绝对定位元素。绝对定位在几种定位方法中使用最广泛,这种方法能够很精确地把元素移动到任意你想要的位置。

一个元素变成了绝对定位元素,这个元素就完全脱离正常文档流了,绝对定位元素的前面或者后面的元素会认为这个元素并不存在,即这个元素浮于其他元素上面,它是独立出来的。

什么叫“脱离正常文档流”,请参考“HTML文档流”这一节。

  语法:

position:absolute;

top:像素值;

bottom:像素值;

left:像素值;

right:像素值;

  说明:

“position:absolute;”是结合top、bottom、left和right这4个属性一起使用的,其中“position:absolute;”使得元素成为绝对定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

现在,我们暂且可以这样理解:CSS固定定位元素和CSS绝对定位元素的位置是相对于浏览器而言;而CSS相对定位元素的位置是相对于原始位置而言。

  4.CSS静态定位static

如果没有指定元素的position属性值,也就是默认情况下,元素是静态定位。只要是支持position属性的HTML对象都是默认为static。static是position属性的默认值,它表示块保留在原本应该在的位置,不会重新定位。

说白了,平常我们根本就用不到“position:static”。不过呢,如果有时候我们使用JavaScript来控制元素定位的时候,如果想要使得其他定位方式的元素变成静态定位,就要使用“position:static;”来实现。

在CSS入门阶段,只需要深入学习固定定位(fixed)、相对定位(relative)和绝对定位(absolute),我们就已经可以走得很远了。

赞(0)
未经允许不得转载:桂林SEO网站 » 定位布局主要分为哪几种
分享到: 更多 (0)