`
hegz
  • 浏览: 436736 次
  • 性别: 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用法初探

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

    第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的任何地点之上。第二种则是使用CSS中的...

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

    主要为大家介绍了绝对定位元素被遮挡的解决方法,涉及使用css绝对定位的使用技巧,非常具有实用价值,需要的朋友可以参考下

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

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

    CSS分栏布局的方法:绝对定位和浮动

    第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的任何地点之上。第二种则是使用CSS中的...

    CSS 定位之position全面了解

    在前端网页布局中,在同一平面上布局,我们大都采用float属性来定位网页元素的...在这里position的absolute绝对定位我们分两类来讲: A:给元素定义了position:absolute,其父框架没有定义任何position属性。此时的绝对

    利用CSS定位背景图片的常用方法总结

    在网络上,对absolute存在这样一个误解,认为绝对定位absolute的使用必须要设置父元素相对定位relative。这样的理解不能认为是错的,只能说对定义没有完全认识。在W3C文档中是这样定义absolute的: 生成绝对定位的...

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

    网页制作Webjx文章简介:在CSS中...第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的

    css关于position属性的用法详解(绝对定位和相对定位的混淆)

    挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法。 在此首先看一下官方对这两个属性值的解释: position 属性值的含义: static ...

    如何让层垂直居中于浏览器窗口?.rar

    介绍: 层垂直居中于浏览器,一直是新手朋友比较头疼的问题。...使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。

    仿魅族官网(HTML+CSS)静态界面

    本次设计魅族官网主要运用了HTML和CSS,为方便检查代码,style采用link进行引入,总体设计思想采用大盒子包括小盒子进行。...能够巩固熟悉浮动、相对定位,绝对定位、下拉列表、hover效果、整体缩放等知识点的用法。

    div的position属性

    小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:...

    绝对式光栅尺细分误差补偿方法

    为了提高绝对式光栅尺的...通过使用JC09型绝对式光栅尺对该方法进行验证,可使其细分相对误差从2.70%降低到1.05%。实验结果表明,该方法能够有效地提高绝对式光栅尺细分精度,且该方法具有原理简单、易于实现的优点。

    CSS实现定位元素居中的方法

    绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。 兼容性不错的主流用法是: CSS Code复制内容到剪贴板 .element { width: 600px; height: 400px; position:...

    Position属性之relative用法

    absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于body来定位的。 relative是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#dem

    使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。 代码如下: <!...

    详解css position 5种不同的值的用法

    position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性)。 有五种不同的值:   •static •relative •fixed •absolute •sticky 然后使用top,bottom,left和right属性定位元素。但是,除非...

    DIV CSS布局中position属性用法深入探究

    这节课主要讲讲relative(相对)以及absolute(绝对)。 如何学习DIV+CSS布局之position属性 如果用position属性来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用...

    图解CSS中position属性的定位用法

    CSS中的定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。该模式包括了常规文档流,浮动,和几种类型的 position 定位的元素。其中,CSS position 属性可以取5种值:position: ...

Global site tag (gtag.js) - Google Analytics