div中的相对定位与绝对定位

~ 1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）例如：＃mybox{position:relative;left:20px;top:20px;}效果就是使这个层向下和向左移动了20px。2.position:absolute; 表示绝对定位，位置将依据浏览器左上角的0点开始计算，绝对定位使元素与文档流无关，因此不占据空间。普通文档流中其这元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布事HTML元素。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制这些框的堆放次序。z-index的值越高，框在堆中的位置就越高。）那么有个问题产生了，现在大家做的网页大部分是居中的，那么我需要这个元素跟着网页中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的，那么单纯的absolute是不行的。正确的解决方法就是在元素的父级元素定义为position:relative;（更正：这里可以是祖父级，也可以是position:absolute;）需要绝对定位的元素设为position:absolute;这样再设定top,right,bottom,left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧！********************************************************************************CSS单元的位置和层次-div标签 我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。　　而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！　　Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。　● 1．使用 DIV 标签 （div）　　当我们使用 CSS-P 的时候， 我们主要把它用在 DIV（division）tag 上。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。　　使用 DIV 的方法跟使用其他 tag 的方法一样：　　　　DIVThis is a DIV tag ./DIV　　如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用 P/P 是一样的。　　但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 javascript 来控制它，比如说移动它或改变它的一些性质等等。　　　　DIV ID="truck"　　　　This is a truck　　　　/DIV　　给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。　　Inline CSS：Inline 是最常用的方法。　　　　DIV ID="truck" STYLE="styles go here"　　　　This is a truck .　　　　/DIV　　External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。　　　　STYLE TYPE="text/css"　　　　!--　#truck {styles go here}　--　　　　/STYLE　　　　DIV ID="truck"This is a truck ./DIV　　Cross-Browser CSS 性质：　　我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作， 所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由 W3C 给出的标准。position　决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。left　相对于窗口左边的位置top　相对于窗口上边的位置width　DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。height　DIV tag 的高度。这个性质很少用除非你想 Clip 层次。clip　给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。clip:rect(top,right,bottom,left);visibility　隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。z-index　DIV tag 的立体位置。值越大 DIV 的位置越高。background-color　DIV 背景的颜色。layer-background-color　Netscape 的 DIV 背景颜色。background-image　DIV 的背景图象。layer-background-image　Netscape 的 DIV 的背景图象。　● 2．绝对定位和相对定位 （position）　　绝对定位：　　定位属性将是网虫们打开幸福之门的钥匙：　　H4 { position: absolute; left: 100px; top: 43px }　　这项CSS规则让浏览器将H4的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。　　左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。　　你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。　　相对定位：　　绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：　　I { position: relative; left: 40px; top: 10px }　　相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。　　除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。　● 3．定位单元的控制 （width、height、visiblility）　　除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。　　宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。　　DIV { position: absolute; left: 200px; top: 40px; width: 150px }　　浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。　　宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。　　高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：　　DIV { position: absolute; left: 200px; top: 40px; height: 150px }　　这里我用了“理论上讲”，因为有些浏览器不支持高度属性。　　可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。　　H4 { visibility: hidden }　　选项：visible 使要素可以被看见hidden 使要素被隐藏inherit 指它将继承母体要素的可视性设置。　　值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。　　当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白区域。　　这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图象只在鼠标滑过时才显示。● 4．单元层次 （z-index）　　特性 z-index 用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说，后出现单元堆叠在早出现单元的上面。Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。同样，具有负 z-index 值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为 -1 的单元在值为 -2 的单元的上面）。　　该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图象设定z-index。（对于Communicator，最好将 IMG标签包在SPAN或 DIV标签内，然后将z-index应用到SPAN或 DIV。）　● 5．剪辑绝对定位单元 （clip）　　绝对定位单元可以被剪辑——也即剪辑显示给用户的区域，只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。但若要求多媒体页面，这是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支持多媒体页面，它们通过文档的脚本接口动态地调整单元周围的剪辑区，从而实线文本“划入”和图像渐显等显示特征。　　在CSS中，剪辑通过 clip 特性来控制，这一特性只能用于绝对定位单元，其缺省值为 auto，按单元的外边缘来剪辑单元（实际上等于没有剪辑）。另外，可通过如下表达式设置剪辑框：　　clip : rect(top,right.bottom,left) ;　　其中 top、right、bottom 和 left 分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。Top、right、bottom 和 left 的值可以为任意绝对或相对长度值（但不能为百分比值），或者是关键字 auto。取值为 auto 意味着剪辑区域的各边放好以后，被剪辑单元中的任何内容都不会超出这个区域。　● 6．控制单元溢出 （overflow）　　固定绝对或相对定位单元的 width 和 height，很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。这时可使用 overflow 来指定浏览器如何处理溢出：值 none（缺省值）允许浏览器显示溢出的内容，因此单元可溢出指定的区域。而值 clip 要求浏览器在单元底部和右边剪辑单元内容，这样，超出指定区域的单元内容将不显示。值 scroll 也同样要求浏览器在单元底部和右边剪辑单元内容（同 clip），不过，浏览器应该（如果可能的话）为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。

---

五河县17664993320： CSS+DIV相对定位和绝对定位的区别和联系 - ？
大狐哀诺力： 相对定位就是相对于当前位置来进行定位,比如“东南方5公里”,就是从当前位置开始,往东南方向走5公里,就到达目的地,也就是说,这个目的地是不固定的,要根据当前所处位置来定.而绝对定位就是指定一个绝对位置来作为目的地,...

五河县17664993320： div中什么情况下用绝对定位'和相对定位??求解!!! - ？
大狐哀诺力： 定位一共有三个常用属性:fixed,relative,absolute1、绝对定位就是设置 .div1 { position:fixed;} 固定某个位置2、.div1 { position:relative;} .div1 .div2 { position:absolute; top:10px; left:10px; z-index:100;} 这种情况是相对定位.即 div2相对定位在div1中的某个位置 希望能帮到您,谢谢!

五河县17664993320： html中div相对定位绝对定位怎么用 - ？
大狐哀诺力： 绝对定位(absolute): 当一个DIV块的位置被定义为绝对定位的时候,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏移量都是零,那么它将漂浮在原来的位置上.否则就会以浏览器的上下左右四边为基准进行偏移. 相对定位(relative): 当设了相对的偏移量之后,这个DIV原来所占据的位置(文档流)不会被下面的DIV块挤占,而是空在那里;当偏移后向下或者向右的内容会被隐藏,而 这一点区别于绝对定位,绝对定位会出现滚动条.但是向左或者向右的内容超出当前浏览器的视线,无论是相对还是觉得定位,超出的部分都会被隐藏.

五河县17664993320： CSS+DIV里面相对定位和绝对定位的区别 - ？
大狐哀诺力： 我来打个比方跟你说一下这两个的区别吧:相对定位和绝对定位:下面用三个人物的位置来说明这个问题,甲乙丙三个人,站在一排,间距都是1米;假若以甲为边缘点即起始计算位置(也就是相当于网页元素距离浏览器边缘的位置)则: 乙距离甲是1米,而丙的位置可以这么说: 相对位置(相对于乙来说,距离是1米),绝对位置即距离甲的位置是2米;大概意思就是这个意思.网页中的元素定位原理和这个差不多,只是参照物不同而已.至于什么情况用什么没有什么绝对的定论,完全可以实际情况来使用.但有一点:若页面想制作成随分辨率的大小而变化的,一般使用相对定位比较好控制.

五河县17664993320： DIV布局用绝对定位好还是用相对定位好? - ？
大狐哀诺力： DIV布局用绝对定位好还是用相对定位好? 这个div+css布局很少用定位,除非做些特效或有必要才定位. div的布局就像表格那样嵌套, 如果要问绝对定位好还是用相对定位好? 因为绝对定位(和文档流没关系)如无申明,则其是对与body而言的,处理不好的话.如显示器尺寸变了,可能就会变型. 相对定位的元素属文档流,所以稳定的,相对定位是相对他该出现的位置,如无设top left之类,和普通基本一样. 一般的绝对定位是这样用的,父元素要是相对定位的且须有布局,如有个高度,这样子元素用绝对定位,就可以相对它的父元素进行绝对定位,父元素若不这样做,那么子元素用绝对定位其实是相对body定位.

五河县17664993320： div+css样式中的绝对定位与相对定位的解释？
大狐哀诺力： 简单的说 绝对层就是不被其他div包含 相对层就是被其他层包含的 比如 <div id=＂div1＂ style=＂...＂> <div id=＂div2＂ style=＂...＂></div> </div> 此时 div2是相对层 div1是绝对层 比如div1是left:100 如果想把div2调到left:110 只要写left:10就可以了 因为他是相对与div1位置的

五河县17664993320： css中的绝对定位和相对定位有什么区别 - ？
大狐哀诺力： 个人的理解.相对定位:在原位置上占用空间,可以设置浮动的上下位置.绝对位置:在原位置上,不占用空间,设置位置会以整个页面为标准.-------------------------------------------------------- 以下是复制别人的 -------------一.相对定位相对定位是一个...

五河县17664993320： DIV+CSS中的绝对定位和相对定位的区别~~~ - ？
大狐哀诺力： 先看一下定义 position:relative|absolute|static|fixed ◆static没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级.◆relative不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可以通过z-index进行层次分级.◆...

五河县17664993320： DIV+CSS中的绝对定位和相对定位的区别~~~菜鸟就不用近来了 - ？
大狐哀诺力： div+css布局很少用定位,除非做些特效或有必要才定位. div的布局就像表格那样嵌套, 如果要问绝对定位好还是用相对定位好? 因为绝对定位(和文档流没关系)如无申明,则其是对与body而言的,处理不好的话.如显示器尺寸变了,可能就会变型. 相对定位的元素属文档流,所以稳定的,相对定位是相对他该出现的位置,如无设top left之类,和普通div基本一样. 一般的绝对定位是这样用的,父元素要是相对定位的且须有布局,如有个高度,这样子元素用绝对定位,就可以相对它的父元素进行绝对定位,父元素若不这样做,那么子元素用绝对定位其实是相对body定位.

五河县17664993320： div css的绝对定位和相对定位~~~~~ - ？
大狐哀诺力： 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body...