网页布局中position定位讲解

定位(position)属性有4个属性值,分别是static、relative、absolute、fixed。本文重点讲解relative(相对定位)和absolute(绝对定位)。

操作方法

  • 01

    相对定位(relative)是非常容易掌握的概念,通俗一点就是正常的块级定位,只不过块级的位置是通过top、left、right、bottom属性来进行规定。不过,原来所占用的空间并没有消失。首先先来正常的定位,如下图。

  • 02

    然后在正常定位的里面,利用position:relative来相对定位,relative属性值的父元素就是上图块元素,如下图。

  • 03

    绝对定位(absolute)第一个特征就是会从文档流中脱离,不占据任何空间。它的定位属性也是跟相对定位一样,通过top、left、right、bottom来进行规定,如下图。

  • 04

    一个父元素里面包含多几个绝对定位,如果绝对定位元素重叠在一起,如下图,A和B重叠在一起了,需要A在前面B在后面,我们只需要在A里面添加z-index来控制。 ,我们可以利用z-index来控制哪个在前,哪个在后,如下图。

  • 05

    但是一定要切忌,如若属性值为absolute,那么一定要配合relative为父元素的块来使用。如果没有配合,如下图。会直接以body为父元素。

  • 06

    静态定位(static)一般不使用,它的属性值定义为没有定位,元素出现在正常的流中。忽略top, bottom, left, right,如下图。

  • 07

    固定定位(fixed)属性值的定义为浏览器窗口进行定位。通俗一点就是父元素为body,通过top, bottom, left, right来控制位置。如下图定位在relative里面,然而并没有效果。

(0)

相关推荐

  • FrontPage2003中网页布局功能的应用

    很多朋友对FrontPage2003中增加的网页布局功能很感兴趣,现在我们一起来深入了解这一实用功能. 用FrontPage2003的"布局表格和单元格"功能布局网页时,需要通过两 ...

  • 网页页面布局中需要注意的是哪八大问题

    网页页面布局中需要注意 操作方法 01 广告与内容的合理搭配 是要对网页正常内容和网络广告二者的合理搭配,一方面不能过多的让广告挤占内容空间,过多的影响访客浏览,另一方面,在访客浏览内容时,能进一步的 ...

  • 巧用格式塔原则处理网页设计中的正负空间

    本文中,我们讨论了关于网页正负空间的格式塔原则.文章虽然有点长但讲解详细,希望能对你有所帮助. 备注:翻译过程中为了适合我们的阅读习惯,有对原文进行一定的内容简化和语义修饰,如有不妥欢迎大家根据官网链 ...

  • 网页设计中的极简风格—无的力量

    小编:首先感谢@飞屋睿UIdesign为我们分享讲解什么是极简设计以及如何做到极简并配上很优秀的图来帮助我们讲解.不久前刚看到一句话来和大家分享下,感觉可以用来提升逼格.这句话是这样写的"U ...

  • 网页设计中要遵循哪些原则

    网页设计中要遵循哪些原则呢?怎样才能设计出一个合格的网页.我们知道,设计的个性化表现得非常明显,每个设计师都有着自己的设计理念,而企业也有着自己的需求,因而这两者经常会出现冲突.因此,网页设计中要遵循 ...

  • CSS网页布局:div水平居中的各种方法

    在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识.不过,还是经常会有人问到这个问题,在这里我简单总结 ...

  • FrontPage简明教程:网页布局

    通常网页的布局使用到的是FrontPage中的表格和框架菜单栏里的命令. 表格(TABLE)是将页面中的内容以表格的形式排列,常用于单一页面内图片与文字的安排,是最常用的布局命令. 图3.1 框架(F ...

  • 20个创新型的网页布局

    布局是一个网站的基础.它们将网站的部分分开,并引导访问者到一个页面的最重要的元素.然而,布局不一定是单一的.一个有创意的设计师可以将一个非传统的布局与友好的交互相结合,最终使得网站功能齐全,并且富有吸 ...

  • 网页设计中的大事件 – 彩色字体

    小编:今天@Ethan为大家带来一篇关于网页设计中彩色字体的文章,主要介绍了什么是彩色字体以及注意事项和如何创作.感兴趣的小伙伴可以试着自己创作一下,完成后别忘记晒出来呦. 那么什么是彩色字体?这是一 ...