相对定位:如果对一个元素相对定位的话,然后,可以通过设置垂直或水平位置,让这个元素相对于它的本身进行移动。属性并没有脱离文档流的,所以元素本身所占的位置会保留。。因此,移动元素会导致它覆盖其它框。(相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。)
例子:
<html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> </body> </html>
效果:
绝对定位:绝对定位使元素的位置与文档流无关,因此不占据空间。绝对定位是对最近的已定位祖先元素,如果不存在已定位的祖先元素,那么是对最初的包含块。
例子:
<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">这是带有绝对定位的标题</h2> </body> </html>
效果图:
通过绝对定位,元素可以放置到页面上的任何位置。上面的标题距离页面左侧 100px,距离页面顶部 150px。
文档流定义:html的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline)。不独占一行
如果要使用相对定位属性或是绝对定位属性,absolute+margin、float+relative、和relative+absolute。
相关推荐
相对定位 相对定位 01 元素的定位 定位 属性 相对 定位 绝对 定位 固定 定位 静态 定位 描述 在CSS中,通过定位属性可以实现网页中元素的精确定位,元素的定位属性主要包括定位模式和边偏移两部分。 相对定位 描述 ...
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的...
CSS相对定位和绝对定位,让你轻松了解css的定位知识和相关的内容
W3School 站点上的所有页面都采用了这种技术,如果您打开我们使用 CSS 文件,您会看到我们对页脚的 div 进行了清理,而页脚上面的三个 div 都向左浮动。
第七讲 GPS绝对定位与相对定位
css的绝对定位,相对定位,浮动的规则。等等等
NULL 博文链接:https://zhang-yingjie-qq-com.iteye.com/blog/346230
固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。 固定定位 示例 定位前 定位后 固定定位 示例 bottom : 0px ...
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法。 CSS网页布局教程:...
信捷XD系列,六轴标准程序,包含轴回零,相对定位,绝对定位, 手自动切换 ,电机参数计算,整个程序的模块都有,程序框架符合广大编程人员思维,只要弄明白这个程序,一般的项目都不会无从下手,参照这个,做项目不再...
详解学习DIV+CSS之四-绝对定位和相对定位
相对定位和绝对定位PPT学习教案.pptx
主要介绍了详解微信小程序 相对定位和绝对定位的相关资料,需要的朋友可以参考下
CSS和Js演示网页绝对定位与相对定位,这些是我们从事前端编程的基础技能,应该学会的东西,这个小示例会告诉你绝对与相对的区别,以及如何去实现他们
一、相对定位(relative) 首先,说一个文档流的概念,有时候也叫做文本流。“流”表示连续不断的意思,比如“流媒体”,这里的文档(文本)流指的是源程序里面的代码,也就是html里面 的标签。 测试代码: 复制...
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
GPS绝对定位与相对定位PPT课件.pptx
GPS绝对定位与相对定位学习教案.pptx
GPS绝对定位与相对定位PPT学习教案.pptx