`

position:relative和absolute的区别、应用

阅读更多
position 有三个值,static(静态)、relative(相对)、absolute(绝对);由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。
对于后两者,一般应用:在一个相对定位的元素里面放置一个绝对定位的元素,如图:



子元素B可以通过top、right、bottom、left来精确定位,定位的参考目标就是其具有相对定位属性的父级元素A;并且设置这些偏移后,产生的空隙会被后面的元素填充(如果后面的元素足够尺寸的话)。由于B元素具有absolute定位属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,为解决这个竞争,就产生了 z-index(空间坐标系的Z轴) 属性,谁的值大,谁就在上面。另外,如果父级元素A没有设置relative,那么B元素就会以body标签当作参考点。

对于具有position:relative属性的元素A,其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点,而不是像上面说的,以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙,其周围的元素并不会填充这些空隙,即使它们足够尺寸(演示)。值得注意的是,此时元素A的margin,margin将作用于该元素的原来位置,由于原位置产生偏移,该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置,并且其周围元素的位置也将产生影响。

回过头来再看看 relative 里面的 absolute,比如上面的A、B两个元素,如果两个元素都设置了top、right、bottom、left,对于元素B来说,其位置偏移的参考点是元素A偏移后的位置,不是元素A的原位置,同样,如果元素B有margin,其参考点也是元素A偏移后的位置,这点很重要,这才是absolute的概念
分享到:
评论

相关推荐

    css中position:relative和overflow:hidden的问题

    在CSS布局中,`position:relative`和`overflow:hidden`是两个非常重要的属性,它们分别用于控制元素的位置和其内容的溢出行为。本文将详细探讨这两个属性的工作原理以及它们之间的相互影响。 首先,我们来看`...

    CSS中的position 的值: absolute 与 relative

    `position`属性有多个可选值,其中`absolute`和`relative`是两个最常使用的值,它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流,即元素会...

    position:relative/absolute无法冲破的等级

    通过对`position:relative`与`position:absolute`的理解和应用,我们可以解决许多复杂的布局问题。本文介绍的问题只是CSS布局中常见挑战之一,通过适当调整CSS属性和HTML结构,可以有效克服这些问题,确保页面布局...

    css中position:relative和overflow:hidden之间的问题

    `position`属性用于定义元素的定位模式,它有多种值,如`static`(默认值)、`relative`、`absolute`、`fixed`和`sticky`。当`position`设置为`relative`时,元素保持其正常流中的位置,但可以通过`top`和`left`等...

    CSS中的position:relative;的作用示例介绍

    然后,对`div#sub`应用`position:absolute;`,并使用`right:10px; top:10px;`来确定相对于`div#demo`的位置。 以下是一个简化的示例: ```css #demo { position: relative; } #sub { position: absolute; ...

    position的relative和absolute总结

    本文将详尽地探讨`position`属性中的`relative`和`absolute`值,以及它们在网页设计中的应用。 首先,`position`属性的默认值是`static`,这意味着元素遵循正常的文档流,即按顺序从上到下、从左到右排列。但当我们...

    li标签的position:absolute与relative案例应用

    今天在写一个购物车里面选择发货地址的部分时,多个收货地址用到了UL标签,由于每个地址的后面有个“修改地址”的功能,而且位于li标签的右边,于是就用到了,position:absolute; right:10px;这样把“修改地址”...

    IE7 position:relative的问题

    `position`属性用于控制元素在页面上的定位方式,常见的值有`static`(默认值,不进行特殊定位)、`relative`(相对定位,相对于其正常位置)、`absolute`(绝对定位,相对于最近的非`static`定位的祖先元素)和`...

    css的position里的relative和absolute的区别.docx

    CSS Position relative 和 absolute 的区别 在 CSS 中,position 属性 plays a crucial role 在排版元素中。在 position 属性中,有五个值:static、inherit、fixed、absolute 和 relative。今天,我们将深入探讨 ...

    关于position、absolute、relative层叠加的技巧

    Position 属性有五个值:static、relative、absolute、fixed 和 inherit。其中,static 是默认值,relative、absolute 和 fixed 是动态定位的三种方式。 静态定位(Static Positioning) -------------------------...

    css position: absolute、relative详解

    总结来说,position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素(或者初始包含块)进行定位,而relative则让元素保持在文档...

    关于CSS position属性值absolute,relative的解释.zip

    本文件主要探讨了`position`属性的两个关键值:`relative`和`absolute`,这些知识点对于创建复杂的网页布局至关重要。 首先,我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position...

    CSS教程——元素定位

    使用 position: relative + position: absolute 可以实现两列布局。例如: ```html <div id="div-1a">this is column-one <div id="div-1b">this is column-two ``` ```css #div-1 { position: relative; } #...

    position:fixed或absolute时百分比参考屏幕宽度

    position属性的值通常可以是static、relative、absolute、fixed以及后来新增的sticky。当使用position:fixed或position:absolute的时候,元素的定位将会脱离常规文档流,而此时如何设置元素的宽度和位置就变得稍微...

    Position属性之relative用法

    在实际应用中,relative定位常被用来作为绝对定位(absolute)的辅助。当一个子元素设置为`position: absolute;`时,它将相对于最近的具有`position: relative;`的祖先元素定位。如果没有这样的祖先,那么它将相对于...

    HTML基础知识——css样式表,样式属性,格式与布局详解

    外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。  2.外层有position:absolute(或relative);那么div相对于外层边框定位,如...

    offsetparent计算

    当内部和外部 div 都未设置 `position: relative` 或 `absolute` 时,内部 div 的 `offsetParent` 将是 `<body>` 或 `<html>` 元素,具体取决于浏览器实现。 **示例代码**: ```html 内部元素 ``` **分析**: -...

Global site tag (gtag.js) - Google Analytics