网站专题BANNER

网页制作中什么是相对定位什么是绝对定位?

发表日期:2021-11-17 21:01:00 文章编辑:洛壹网络 文章来源:深圳网站制作

在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚,今天洛壹网络在这里做一些简单的讲解。


相对定位(relative)


relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。


就是说定位为relative的元素脱离正常的文档流,但其在文档流中的位置依然存在。


它是默认参照父级的原始点为原始点,无父级则以文本流的顺序在上一个元素的底部为原始点,配合top,left,right,bottom进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位,有以下属性:


洛壹浅谈网页制作中什么是绝对定位什么是相对定位?


1)如果没有top,left,right,bottom,以父级的左上角,在没有父级的时候,他是参照浏览器左上角,如果在没有父级元素的情况下,存在文本,则以文本的底部为原始点进行定位并将文字断开。


2)如果设定top,left,right,bottom,并且父级没有设定position属性,仍旧以父级的左上角为原点进行定位。


3)如果设定top,left,right,bottom,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置 由top,left,right,bottom决定。如果父级有Padding属性,那么就以内容区域的左上角为原点,进行定位。


以上三点可以总结出, 无论父级存在不存在,无论有没有top,left,right,bottom,均是以父级的左上角进行定位,但是父级的Padding属性会对其影响。 



绝对定位(absolute)


定位为absolute的元素脱离正常文本流,但与relative的区别是其在文档流的位置不再存在。


洛壹浅谈网页制作中什么是绝对定位什么是相对定位?


使用left,right,top, bottom等属性相对于其最接近的一个并且有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。


绝对定位对象可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。


洛壹浅谈网页制作中什么是绝对定位什么是相对定位?





相关内容
今天给大家分享一波前端开发者实用干货合集

今天洛壹网络给大家来一波实用的设计和开发类的干货素材合集吧!这次的合集依然是更加偏重开发和前端的需求,有一些颇为有趣的桌面应用程序,一些非常方便的 Web 应用,以及一些实用性很强的 JavaScript 库。

前端开发 meta name="viewport" 的用法

移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了好几个像素。

响应式网站建设需要什么样的技术?

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。

深入理解 Java 枚举(enum) 7种常见的用法

在JDK1.5之前,我们定义常量都是:publicstaticfianl....。现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法。

HTTP(超文本传输协议)的六种请求方法介绍

超文本传输协议(Hyper Text Transfer Protocol,HTTP)是一个简单的请求-响应协议,它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

web开发人员需要掌握的编程技能有哪些?

web开发所需的编程知识随着时间的推移而不同,这取决于你想要做什么。那么web前端开发最新的编程技能和知识有哪些呢?

JavaScrip 前端/后台开发人员必须要掌握的编程技能

在每年最受欢迎的编程语言排行榜中,javascript一直处于领先地位,而2021年,它依然会是最受欢迎的编程语言。

浅谈弹性布局在网站建设过程中的奇妙之处

熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果,今天洛壹网络简单为大家讲解一下CSS弹性布局的奇妙之处。

我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器