为什么总是要求使用position的时候父类是relative

  当我们使用position的时候,一般来说外面的框架是使用relative,里面的元素使用absolute的,这里有两个注意点:

1.如果我们不给父类一个position属性的时候,那么子元素就会以body为参照物,于是东西就自动【跑掉了】,所以父类的position是必不可少的。

 2. 如果父类使用的position也是absolute的时候,父类也会一起脱离文档流,使得父元素不占对应的空间从而导致元素崩溃,即——各个元素摆放位置错乱。而且父元素因为是absolute,所以对应的对象变成了body,导致要么你就只能精巧的计算元素的位置,然后【凭空】放上去。

时间: 2024-08-26 13:08:53

为什么总是要求使用position的时候父类是relative的相关文章

css position 应用(absolute和relative用法)

1.absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位.可以选取具有定位的父级对象(下文将说到relative与absolute的结合使用)或者body坐标原点进行定位,也可以通过z-index进行层次分级.absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的,当设定TRBL值后则根据浏览器的左上角作为原始点.具体案例如下: <!DOC

【CSS3】---position之absolute绝对定位和relative相对定位

”最近被absolute和relative弄的不知所措,不知道怎么用了,网上查找文章总结总结,对与错欢迎指正, 也欢迎您加入IT交流群:123493055大家一起交流>>>>>“ Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点.如果设定TRBL并且父级没有设定position属性

CSS中的定位position属性(absolute,relative,static,fixed)的具体用法

只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. 2.Fixed属性值是相对于浏览器窗口定位的(及视口坐标),设置该属性后的元素是独立的,他脱离文档流,当拖动滚动轴时该元素在浏览器窗口中的位置不会发生变化.时 3.所有的父级元素均没有设置position(除了static属性值以外)时,则当某个子元素position:absolute时,其top

css中position属性:absolute和relative

absolute :将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依据 body 对象.而其层叠通过z-index属性定义. relative :对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置.

CSS IE6、7下关于Position的一个bug问题分享

又好久没来了,小码哥甚是想念 想念我的人.由于近期工作中跟CSS打交道较多,所以偶尔会碰到有关它的一些问题,CSS很强大,尤其是后来的CSS3.鄙人正在学习中,如果就所遇到的问题,分析有偏差,望大家海涵哈!!下面就说说我刚刚遇到的一个问题,也许某些前辈大拿们会在心里BS我,不过对我来说,都是收获!嘎嘎,, 总所周知,我们都知道CSS中的定位position属性是一个相当重要和特殊的属性.它分别有一下几个属性值: position:relative; position:absolute; posi

&lt;转载&gt;DIV+CSS position定位方法总结

如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative(相对)以及absolute(绝对). [DIV+CSS布局之position属性:absolute] 意思是:他的意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面

css基础篇(三)——布局(上)float和position

1.定位(position) position的值有:relative/absolute/fixed/static/inherit; static:为position属性的默认值,static元素会遵循正常的文档流,且会忽略top,bottom,left,right等属性; inherit:如同其他css的inherit值,即继承父元素的position值(ie不支持) 下面重点介绍前三个值: 1.1 相对定位(relative) 场景描述(如上图):第二个div的位置相对自己向下向右移动30p

float 与 position 剪不断理还乱的关系

float: 1.使当前元素div1脱离文档流: 2.影响紧挨着它的后面的div2,使其钻到div1的下面.但是div2中文字不发生变动.(div2没有浮动): 3.要想2个div并排显示,必须都要设置float: position: 1.相对定位 relative: 2.绝对定位 absolute:使当前元素完全脱离文档流,就像在页面中没有该元素一样,或者说我把它从原来位置拿走了,它后面的元素当它不存在.要想并排显示两个div,

十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的"position"中的"static.relative.absolute.float"使用,觉得蛮有意思的.整理了一下贴上来与大家一起分享.希望大家能喜欢. 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考