HTML中DIV的相对定位与绝对定位

HTML中DIV的相对定位与绝对定位,第1张

绝对定位(absolute):

当一个DIV块的位置被定义为绝对定位的时候,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是零,那么它将漂浮在原来的位置上。否则就会以浏览器的上下左右四边为基准进行偏移。

相对定位(relative):

当设了相对的偏移量之后,这个DIV原来所占据的位置(文档流)不会被下面的DIV块挤占,而是空在那里;当偏移后向下或者向右的内容会被隐藏,而 这一点区别于绝对定位,绝对定位会出现滚动条。但是向左或者向右的内容超出当前浏览器的视线,无论是相对还是觉得定位,超出的部分都会被隐藏。

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据body对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。

绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样:

相对路径的层级关系是这样的,同级目录用/或者什么也不写,上级目录用../,下级目录就用目录名/。

HTML写相对路径的代码:

<html>

<body>

<center>

</p></body>

</html>相对index.html所有的目录而言:

“../”表示上一级目录开始

“./”表示当前同级目录开始

“/”表示根目录开始。

扩展资料:

绝对路径:是从盘符开始的路径,形如

C:\windows\system32\cmd.exe

相对路径:是从当前路径开始的路径,假如当前路径为C:\windows

要描述上述路径,只需输入

system32\cmd.exe

实际上,严格的相对路径写法应为.\system32\cmd.exe

其中,.表示当前路径,在通道情况下可以省略,只有在特殊的情况下不能省略。

假如当前路径为c:\program files

要调用上述命令,则需要输入

..\windows\system32\cmd.exe

其中,..为父目录。

参考资料来源:百度百科-相对路径

position:absolute这个是绝对定位;是相对于浏览器的定位。比如:position:absolute;left:20pxtop:80px

这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top

left在定位。应该用margin。比如:<div

class="1"></div><div

class="2"></div>当1固定了位置。1的样式float:leftwidth:100px

height:800px2的样式为float:left

position:relative;margin-left:20pxwidth:50px2的位置在1的右边,距离120px


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8313505.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存