HTML的relative与absolute使用及区别详解_HTML/Xhtml_网页制作

来源:脚本之家  责任编辑:小易  

1、文档流不同elative 不脱离文档流,absolute 脱离文档流。2、分级不同elative 参考自身静态位置通过 top(上),bottom(下),left(左),right(右)定位,并且可以通过z-index进行层次分级。absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。3、定位不同absolute是绝对定位,绝对定位就是相对于父元素的定位,不受父元素内其他子元素的影响;而relative是相对定位,相对定位是相对于同级元素的定位,也就是上一个同级元素。扩展资料由于广告的滥用,使得一些浏览器软件都开始有了广告内容拦截,使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed。含义:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。虽然原来的浏览器并不支持过个属性,但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果(目前无法使IE5.x)实现这种效果。CSS元素绝对定位、相对定位 布局和浮动等1、position:static|无定位position:static是所有元素定位的默认值,一般不用注明,除非有需要取消继承的别的定位example:div-1 {position:static;}2、position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置。如果要让div-1层向下移动20px,左移40px:example:div-1 {position:relative;top:20px;left:40px;}如果用到相对定位,紧随他的层divafter是不会出现在div-1的下方,而是和div-1在同一个高度出现。可见,position:relative;并不是很好用。参考资料来源:百度百科-CSS定位www.zgxue.com防采集请勿采集本网。

HTML的relative与absolute区别:说实话html这门语言算的上是这个世界上最简单的一门语言了,标签语言嘛,就是标签多了点英文单词超多,不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是还是有一些比较难理解掌握标签和属性,就比如属性position,它是定位的一种方式代码如下:

让绿色的div包含红色的div,这样红色的盒子就可以相对绿色的盒子定位 代码如 绿色的盒子> 红色的盒子>

#div1{position: relative;width: 200px;height: 200px;background-color: blueviolet;margin-left: 100px;}

可以这样说,参考的坐标不一样,absolute是绝对定位,以屏幕左上角(left=0;top=0)为参考点, relative是以原来元素的坐标为参考点,比如left=1em的话就会显示时右偏1em。

 先来说一下postion常用的5大属性值:

应该是第一个div把第二个div挡住了,在设置position:absolute;的div里再写一个z-index:1,另一个div里写z-index:2,应该就可以了

--sticky:基于用户的滚动位置来定位。也就是以sticky标签定义的标签会随着页面上下移动,但是其内容却不会超过屏幕比如在网站侧边那些移动导航栏。

--static:HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。也就是和没写position一样的效果。

--fixed:元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动,相当一个壁纸标签一样一动不动像镶嵌在屏幕里一样,在很多网站尤其是购物网站里面经常能看到,你看到页面侧边那静静躺在那的导航栏就是用fixed实现的

--relative与absolute:相对定位元素的定位是相对其正常位置。每个标签的样式设置从来都是针对自己的,但是会对其余标签产生相对影响,html很重要的一点就是嵌套关系即标签里有标签,首先在平级我们看下效果两个<div>是兄弟关系

 以上这种情况将div1的position设置为relative相对位置,可以看出小方块会紧接着大方块也就是小方块是相对于大方块来的也就是relative:相对定位元素的定位不允许元素的重叠,俗话就是通过relative说这个位置我已经占了你只有站我下个位置了,当我们把大方块的改成绝对位置absolute

#div1{position: absolute;width: 200px;height: 200px;background-color: blueviolet;margin-left: 100px;}

效果如下:

小方块会跳上去,也就是说这个位置两个div都能占,不是大方块独占的absolute定位是定位绝对的相对于父标签而言,本例的父标签就是<body></body>

扩展:

<div id="div1"> <div id="div2"></div></div>

当小方块嵌套在大标签里面这时你的div1的position的relative与absolute效果一样没有改变之前的效果只体现在兄弟标签之间

这时候如果你再设置div2的样式margin-left就是相对于div2来说了,举个例子当你大方框距离左边100px当你小方框样式margin-left:100px;这时实际情况是小方框距离左边有200px

#div1{position: relative;width: 200px;height: 200px;background-color: blueviolet;margin-left: 100px;}#div2{margin-left: 100px;position: absolute;width: 50px;height: 50px;background-color: red;}

总结:相对定位元素经常被用来作为绝对定位元素的容器块,当标签有嵌套时,子标签的位置样式设置是相对于父标签的。宁外想要了解快标签就必须了解html的盒子模型

到此这篇关于HTML的relative与absolute使用及区别详解的文章就介绍到这了,更多相关HTML的relative与absolute内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

position:relative;相对定位。相对于其父级元素来定位。生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20"会向元素的 LEFT 位置添加 20 像素。absolute 绝对定位,通过 top,left 样式来绝定元素位置内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html相对路径(relative path)和绝对路径(absolute path)深入理解
  • 谁能帮我解释一下在html里position: relative;是什么意思?
  • css中absolute和relative的区别
  • [html] 关于position属性absolute和relative的区别?求图示和坐标描述详解...
  • html中关于position:relative的疑问
  • html relative和absolute定位的问题
  • html中position:absolute与position:relative的区别?
  • Html position的absolute和relative的问题。。
  • html代码背景怎么放到最上层,设置position:relative;不起作用
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html/xhtmlhtmlrelativeabsolutehtml相对路径(relative path)和绝对路径(absolute path)深入理解html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧iframe标签用法详解(属性、透明、自适应高度)16进制颜色代码(完全)40多个漂亮的网页表单设计实例定义input type=file 样式的方法html中让表单input等文本框为只读不可编辑的方法html中设置锚点定位的几种常见方法html 几种特别分割线特效 html iframe 用法总结收藏html 超级链接详细讲解网页嵌入百度地图和使用百度地图api自定义地图的详细html的relative与absolute使用及区别详解html页面展示json数据并格式化的方法基于html代码实现图片碎片化加载功能详解html设置边框的三种方式如何让你的html button本身居中的实现html中车牌号省份简称输入键盘的示例代码html如何对齐多个表单中的文本框的实现table自适应以及溢出的一些设置详解html n种方式实现隔行变色的示例代码html页面自适应宽度的table(表格)
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved