`
akunamotata
  • 浏览: 379903 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS里面position:relative与position:absolute 区别

阅读更多
position:absolute这个是绝对定位


是相对于浏览器的定位。

比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position:relative是相对定位


是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如:<div class="1"></div><div class="2"></div>

当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position:relative;margin-left:20px;width:50px;
2的位置在1的右边,距离120px 
分享到:
评论

相关推荐

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

    然而,需要注意的是,`position:relative`可能会改变元素的大小计算方式,尤其是在与`absolute`或`fixed`定位的子元素一起使用时。如果父元素设置了`position:relative`,并且有绝对定位的子元素,那么子元素的定位...

    CSS中的position 的值: absolute 与 relative

    在CSS(层叠样式表)中,`position`属性...总结起来,`position: relative`和`absolute`在CSS布局中各有其独特的功能和用途。理解并熟练运用它们,能帮助开发者更好地控制网页元素的布局,实现更复杂、精细的设计效果。

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

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

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

    在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素如何在页面上定位。在你的问题中,你特别关注了`position:relative;`的作用,这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`...

    css position: absolute、relative详解

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

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

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

    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、absolute、relative 层叠加的技巧 Position 属性是 CSS 中的一种布局方式,用于控制元素在文档中的位置。Position 属性有五个值:static、relative、absolute、fixed 和 inherit。其中,static 是...

    position的relative和absolute总结

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

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

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

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

    本案例中涉及到的是`position`属性的两个值:`relative`和`absolute`,它们在li标签的应用中起到了决定性的作用。 首先,我们来看`position: relative;`。当一个元素的`position`属性设置为`relative`时,它会相...

    IE6 CSS高度height:100% 计算失效/无效

    样式复制代码代码如下:#demo{position:relative;width:300px;border:1px solid #090;}#demo div{position:absolute;width:200px;height:100%;background-color:#f00;} 结构 复制代码代码如下:”demo”&gt; &lt;div&gt;...

    CSS教程——元素定位

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

    CSS之Position详解

    `position`属性共有四种取值:`relative`、`absolute`、`fixed` 和 `static`。接下来我们将详细介绍这四种定位方式。 #### 1. Relative(相对定位) 相对定位是指相对于元素原本的位置进行偏移。当一个元素设置了`...

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

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

    JQuery和html+css实现带小圆点和左右按钮的轮播图实例

    是的!你没看错!还是轮播图。这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白... position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none; position:absolute

    JS解决position:sticky的兼容性问题的方法

    在前端开发中,`position: sticky` 是一种CSS布局属性,它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而,`position: sticky` 在某些浏览器,尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...

Global site tag (gtag.js) - Google Analytics