`
hegz
  • 浏览: 441681 次
  • 性别: Icon_minigender_1
  • 来自: 茂名
社区版块
存档分类
最新评论

absolute绝对定位的非绝对定位用法

阅读更多

总结:

 

position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果是不一样的。例如一个div中有个absolute属性元素,其没有left或是top值,其会像个普通的inline-block属性元素一样静静地呆在这个div 里面,但是一旦设置了left:0;top:0;对不起,这个absolute元素立马变身,直接从DOM tree里面脱离,独立于文档流,结果相对于最近的relative属性的祖先标签定位(如果没有,就body定位)。

 

文章链接:http://www.zhangxinxu.com/wordpress/?p=608

 

 

分享到:
评论

相关推荐

    CSS 绝对定位属性absolute用法初探

    本文将深入探讨CSS绝对定位属性`absolute`的用法,并提供实例来帮助理解。 首先,理解`position`属性是至关重要的。这个属性决定了元素如何在页面上定位。当`position`的值设为`absolute`时,元素就进入了绝对定位...

    绝对定位元素被遮挡的解决方法

    使用绝对定位可以将元素放置在相对于最近已定位(非static)祖先元素的指定位置。然而,在实际应用中,绝对定位的元素有时会遇到被其他元素遮挡的问题,这对于设计和布局产生了一定的影响。解决绝对定位元素被遮挡的...

    浮动里的绝对定位元素在IE下被遮挡的解决方法

    首先,我们需要理解浮动(Float)和绝对定位(Absolute Positioning)的概念。浮动是一种布局技术,常用于创建多列布局或使文本环绕图像。当一个元素浮动后,它会从当前的流中移出,使得后续的元素可以移动到它的...

    firefox下绝对定位元素重叠造成不可点击问题

    在Firefox浏览器中,当涉及到CSS布局的绝对定位(absolute positioning)时,可能会遇到一个常见的问题:元素重叠导致某些元素变得不可点击。这个问题通常出现在有多个绝对定位元素且它们的位置相互覆盖时。本文将...

    JS绝对定位瀑布流布局(随窗口大小自由变动)

    2. **绝对定位**:在CSS中,使用`position: absolute;`可以将元素相对于最近的非静态定位祖先元素进行定位。在瀑布流布局中,我们需要为每个元素设置左上角的坐标,使其在页面上正确对齐。 3. **列数计算**:根据...

    绝对定位(absolute)和浮动定位(float)分析

    在CSS布局中,绝对定位(absolute)和浮动定位(float)是两种常用的技术,它们各自具有独特的特性和应用场景。在创建多栏布局时,这两者都可以发挥重要作用。 **1. 绝对定位(Absolute Positioning)** 绝对定位...

    CSS实现网页分栏布局的方法:绝对定位和浮动.docx

    在CSS中,实现多栏布局通常有多种方法,而绝对定位和浮动是两种常见的技术。这两种方法各有特点,适用于不同的场景,且可以相互结合以达到更复杂的布局效果。 **1. 绝对定位** 绝对定位允许开发者精确地控制元素的...

    css教程之绝对定位使用详解

    如果说相对定位没有脱离文档流,相对于对象本身进行偏移有点拖泥带水的话,那么绝对定位绝对是快刀斩乱麻,因为绝对定位可以使一个对象脱离正常的文档流,好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...

    大图上悬浮放大图标绝对定位

    3. `absolute`:绝对定位。元素相对于最近的非`static`定位的祖先元素进行定位,如果没有这样的祖先,则相对于`body`定位。 4. `fixed`:固定定位。元素相对于浏览器窗口定位,即使窗口滚动,元素的位置也不会改变。...

    div+css相对定位和绝对定位用法实例详解

    本教程将深入探讨两种主要的定位方式:相对定位和绝对定位,这两种方法在DIV+CSS布局中尤其常用。 1. 相对定位(relative) 相对定位是CSS定位的基础,它保持元素在正常文档流中的位置,但允许通过`top`、`right`、...

    网页制作中层相对定位的实现方法

    我们可以创建一个包含多个子层的外部层,外部层使用相对定位,而子层使用绝对定位。这样,即使浏览器窗口大小发生变化,子层也会相对于外部层保持固定的位置关系,从而实现动态的布局效果。 ### 总结 通过上述讨论...

    CSS实现网页分栏布局的方法:绝对定位和浮动.pdf

    本文主要探讨CSS如何实现网页的分栏布局,重点集中在绝对定位和浮动这两种方法。 1. **绝对定位** 绝对定位是一种强大的布局工具,它允许开发者精确控制元素的位置,不受其他元素影响。在CSS中,有四种定位选项:`...

    元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法

    如果需要保持绝对定位不变,应该添加透明的背景图或者使用特定于浏览器的解决方法。然而,在选择解决方案时,还需要考虑到页面上其他功能的兼容性和稳定性,确保不会因为解决一个交互问题而引入新的问题。

    郜振宇php职业培训系列讲座010:详解css浮动、绝对与相对定位.rar

    例如,一个绝对定位的子元素可以使用相对定位的父元素作为定位的参照点。 3. CSS 绝对定位(Absolute Positioning) 绝对定位使元素完全脱离文档流,基于最近的已定位祖先元素(如果有)进行定位。如果找不到已定位...

    CSS布局实例[绝对定位:一栏固定,一栏自适应]

    绝对定位(absolute positioning)允许元素脱离其正常文档流,相对于最近的非静态定位祖先元素进行定位。如果没有这样的祖先,那么它将相对于body定位。在我们的例子中,一栏固定宽度的元素可能是侧边栏,而一栏...

    绝对定位(浮动的层),在IE6中fixed

    在CSS中,`position`属性是实现这一效果的关键,其值可以设置为`absolute`来启用绝对定位。这种定位方式会根据最近的非静态定位祖先元素(如果没有这样的祖先,则相对于初始包含块,通常是浏览器窗口)来定位元素。...

    FireFox正常 IE错位的绝对定位元素

    在网页布局中,绝对定位(absolute positioning)是一种常用的CSS定位技术,它允许元素相对于最近的非 static 定位祖先元素进行定位。然而,浏览器之间的兼容性问题常常会给开发者带来挑战,尤其是在处理IE6、IE7和...

Global site tag (gtag.js) - Google Analytics