HTML中DIV的相对定位与绝对定位如何操作?

如题所述

绝对定位(absolute):

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

相对定位(relative):

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

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

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

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

温馨提示:内容为网友见解,仅供参考
无其他回答

HTML中DIV的相对定位与绝对定位如何操作?
绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据body对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过z-inde...

div中的相对定位与绝对定位
正确的解决方法就是在元素的父级元素定义为position:relative;(更正:这里可以是祖父级,也可以是position:absolute;)需要绝对定位的元素设为position:absolute;这样再设定top,right,bottom,left的值就可以了,这样其定位的参照标准就是父级的左上角padding的左上侧!***CSS单元的位置和层次-div标签 我们都知道,在网页上...

HTML中怎样区别绝对定位和相对定位呢?
接着看看设置相对定位之后的位置变化,可以看到,蓝色的div偏移了,并且是相对它自己原来的位置。也就是说,相对定位是相对自己原来的位置来进行定位的。接着我们再去修改rtwo的position,把它改为absolute,看看会发生什么状况。如图,蓝色div设置绝对定位之后,会跑出红色div的范围,变成以网页的左上角为...

怎样在div内定位两个div的位置?
用绝对定位,把两个都放在一个大的DIV里面,大的设置成position:relaitve。第一个小DIV属性设置成为position:absolute; z-index:1。第二个小DIV属性设置成为position:absolute; z-index:2。width、height、left和top视情况而定。注:1、父级div用相对定位position:relative,子级div用绝对定位position:ab...

DIV相对于父DIV绝对定位
<div style="height:158px; width:158px; filter: alpha(opacity=45); opacity:0.45; position:absolute; left:0; top:0;"> Test002<br\/> <\/div> <\/div> 父级的相对定位:是要把子DIV的绝对定位的起点以父DIV左上角为起点,如果没有就默认屏幕左上角了。子DIV的绝对定位:是无视父DIV...

CSS设置DIV的定位绝对定位和相对定位
绝对定位:现在来看看绝对定位,使得div1和div2能重叠,具体的代码如下: html head titleCSSdiv定位\/title style type="text\/css" .div1{ height:100px; width:100px; border-style:solid; border-color:red; border-width:10px; background-color:yellow; } .div2{ height:100px; ...

div标签里面的相对绝对position属性怎么设置?
1、div标签里面的相对绝对position属性有四个可选值,它们分别是:static、absolute、fixed、relative。2、具体设置方法如下:1)DIV布局属性之position:static,无定位。该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性...

HTML里的相对定位和绝对定位谁能说清楚?什么时候用相对定位什么时候用...
绝对定位 设置 就是相对于它的祖先节点中 设置过相对定位的那块容器 来进行绝对定位如果祖先节点中没有设置 默认就是body标签。设置它的top left bottom right 是设置位于它祖先节点中设置过相对定位的 那个节点容器中 它所在的位置。 打个比方 就是一个div1 设置了相对定位,div2设置了绝对定位 ...

什么是DIV的相对布局和绝对布局
div-1 { position:relative;top:20px;left:40px;} 如果用到相对定位,紧随他的层divafter是不会出现在div-1的下方,而是和div-1在同一个高度出现。可见,position:relative;并不是很好用。position:absolute|绝对定位 使用position:absolute;,能够很准确的将元素移动到你想要的位置,让我将 div-1a ...

绝对定位和相对定位有什么不同?
1、“position:absolute”是绝对定位的意思,单纯的使用absolute属性并不会其效果,需要配合“top bottom left right ”属性才能看到效果。首先需要新建一个html文件,这里定义了10个换行符,换行符的下面定义一个div:2、此时保存文件,打开浏览器可以看到div在浏览器的下方位置,接下来来设置绝对定位,让...

相似回答