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

css-绝对定位的参考对象

    博客分类:
  • css
阅读更多

当我们把一下element设为绝对定位时,我们需要寻找绝对定位的参考对象,一般情况下,我们发现是body对象,但这并不是真理.

 

 

当一个绝对定位的对象寻找它的参考对象时,是从它的父结点开始向上寻找的.它的定位参考对象是和它离的最近的并明确设了position属性,但所设值不是static的祖先.

 

按照上面的说法一般没错,但是如果它的祖先中有一个竟然把position设成了inherit,这时,就还要参考它这个祖先的祖先的position属性,是不是有点头大了...我也晕了.

 

重头来过,我们来说position属性,它有四个值:absolute,relative,fixed,static;对于inherit,我不把它作为一个值,因为它最终会转化为上面四个值中的一个值,说白了就是继承它父亲的值.现在,又有情况了:

 

  1. 如果有个对象设置position为四个值中的一个值,这时没有疑问.
  2. 如果对象根本就没设position属性,那它就是static的.
  3. 如果有个对象设置position为inherit,那它就和它父亲取一样的值,比如它的父亲未设position属性,所以参考2:它父亲的position是static的,所以它的position也是static的.

 

 

现在我们可以明确确定一个对象的position属性值了,不管它设不设这个属性,我们都可以计算出这个属性值.

 

回到原先的问题,如果一个对象设置了绝对定位,那它的定位参考对象就是它的所有祖先中,和它离的最近并且 postion属性值不是static 的那个祖先.

 

总结完毕,下面有一个写的测试,代码有点乱.

 

 本文链接:  http://kino.iteye.com/blog/205528  转载请注明出处,谢谢!

分享到:
评论

相关推荐

    前端css-html5-js三大样式参考手册全套下载

    5. 定位:相对定位、绝对定位、固定定位等,用于精确控制元素位置。 6. 媒体查询:实现响应式设计,根据设备屏幕尺寸应用不同的样式。 7. CSS预处理器:如Sass、Less等,提供更强大的变量、嵌套规则等功能。 8. ...

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

    一.基本概念: 如果说相对定位没有脱离文档流,相对于对象本身进行偏移有点拖泥带水的话,...定位参考对象: 可以使用top属性和left属性设置绝对定位对象的偏移量。绝对定位虽然脱离了文档流,但是也需要有定位的参考对象

    CSS完全参考手册

    定位机制包括静态定位、相对定位、绝对定位和固定定位,它们各自适用于不同的场景,例如,绝对定位常用于创建悬浮元素,固定定位则能实现固定头部或侧栏。 其次,CSS的界面设计涉及颜色、边框和背景的设置。颜色...

    CSS文档 CSS2.0.chm

    4. **定位与布局**:CSS2.0引入了相对定位、绝对定位和固定定位,以及流体布局的概念。通过`position`属性,开发者可以调整元素在页面中的位置。此外,浮动(`float`)和清除(`clear`)也是布局中的关键工具。 5. ...

    Coursera_HTML-CSS-Javascript-for-Web-Developers

    5. 相对定位(relative)、绝对定位(absolute)和固定定位(fixed):控制元素的位置。 6. CSS预处理器,如Sass和Less,增加可复用性和组织性。 7. CSS3新特性,如Flexbox(弹性盒布局)和Grid布局,简化复杂的页面布局。...

    CSS元素的浮动与定位综合案例2.pdf

    2. **CSS定位**:在这个案例中,采用了“外部结构相对定位,内部结构和对象绝对定位”的原则。这意味着页面的顶级容器(如`#container`)被设置为相对定位,作为内部元素绝对定位的参考点。这样可以确保内部元素相...

    CSS参考手册+Ajax参考手册+HTML参考手册+VbScript参考手册

    此外,布局模型如流体布局、网格布局和Flexbox,以及定位技术(如相对定位、绝对定位和固定定位),都是CSS中的重要概念,用于实现复杂页面设计。 HTML则是网页内容的结构化表示语言,它定义了网页的骨架和内容。...

    CSS初级学习手册.pdf

    - 绝对定位:相对于最近的已定位的父元素(非static)进行定位。 - 子绝父相:子元素绝对定位,父元素相对定位。 - 固定定位:相对于浏览器窗口进行定位。 - 粘性定位:元素在页面滚动到某个位置时固定在那里。 12....

    借助CSS定位来实现把一个DIV放到另一个div右下角

    借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: 复制代码代码如下: ”box1″> ”box2″>测试内容</div> </div> <style> <!– #box1{width:600px;height:600px;background:...

    css2.0文档对象模型中文手册预览版IE5.5

    3. **定位与布局**:CSS2.0提供了静态定位、相对定位、绝对定位和固定定位等方法,使元素可以在页面上自由移动和排列。同时,流体布局、网格布局和表格布局也是CSS2.0的重要部分,用于创建响应式和动态的网页设计。 ...

    css、js、参考手册

    3. **布局模式**:CSS提供了流体布局(Block)、网格布局(CSS Grid)、Flexbox(弹性盒布局)和绝对定位等多种布局方式,适应不同场景的需求。 4. **响应式设计**:CSS3引入媒体查询(@media rule),允许根据设备...

    JavaScript和CSS帮助文档

    - 盒模型和定位:浮动、绝对定位、相对定位 - CSS3 新特性的详细解析 - 动画和过渡效果 - 可访问性和优化技巧 这两个文档集合对于 Web 开发者而言非常有价值,无论是初学者还是经验丰富的开发者,都能从中找到解决...

    Web前端开发项目教程(HTML5+CSS3+JavaScript)全册习题参考答案.docx

    例如,CSS3支持选择器的增强,可以更精确地定位元素,如nth-child(),还有伪类如:hover和:checked。它还引入了边框半径、渐变、阴影、动画和转换等视觉效果,以及新的布局模式如Flexbox和Grid。 【JavaScript】 ...

    相对、绝对和固定定位的比较

    固定定位是一种特殊的绝对定位,它的参照对象是视口(viewport),即浏览器窗口。这意味着当页面滚动时,固定定位的元素将保持在浏览器窗口中的同一个位置。固定定位的元素总是以当前的页面为基准进行偏移,就像背景...

    CSS+div、css2.0中文样式表帮助手册、dhtml手册

    - 浮动与定位:`float`属性用于创建流体布局,`position`属性则用于绝对定位元素,如`relative`、`absolute`、`fixed`。 2. div布局: div元素是HTML中的一个块级元素,常用于组合其他元素,创建页面布局。通过...

Global site tag (gtag.js) - Google Analytics