absolute和relative总结

来源:互联网 发布:武汉火凤凰云计算基地 编辑:程序博客网 时间:2024/06/09 22:01


我个人理解,反正不管有没有写position: 。都默认有position这个设置,只不过不写的话,默认是position:static,也就是在正常文档流中,就不会收到trbl设置的影响。(还有是很多的absolute元素叠加在一起时和absolute密切相关的z-index属性。)
反正定义为absolute的标签就脱离文档流了,相当于就不占原来位置了,正因为如此,有时设置为 absolute时,发现它下边的元素找不见了,就是到了这个标签原来的位置底下了,(按理说应该后边的元素会覆盖前边的元素呀,原因是因为absolute元素脱离文档流了,)
static就是position的默认值,没有定位,不受tbrl的影响,
fixed就是相对于浏览器窗口是固定位置,与文档流 无关,不占空间,且会和其它元素重叠,
relative则是可以移动,但还占着位置,其他的后边的标签,不管是有没有position,有position的话不管是absolute,还是relative。
绝对定位不占位置,单出一层。
如果上边的同级元素是absolute,那么下边的元素就会到了上边同级元素的底下,被隐藏


对,relative是移动后相对于移动前的位置变化(注意体会),所以它的同级元素的下边的元素


相对定位与绝对定位
当有多个元素嵌套是,如果某个里边嵌套的元素用了position:;而它的向上按族谱关系追踪时如果没有找到设置position:;的,都是按照默认的,它就会参照浏览器左上角,


position:absolute;默认参照浏览器左上角,配合tbrl进行定位.


如果没有父级,并且它的上边没有文字。那子级就参照浏览器左上角(也就是html)。
如果没有父级,并且它的上边有文字或有其它标签,并且其他标签没有position,那子级就参找上边的文字或标签的下边,
如果没有父级,并且它的上边有文字或有其他标签,并且其他标签有position,并且标签position是absolute,那子级就参照上边的文字,而不管上边标签的位置(因为一个标签如果是position:;absolute,就脱离文档流了,)
如果没有父级,并且它的上边有文字或有其他标签,并且其他标签有position,并且标签position是relative,那子级就在上边的文字或标签的下边,
如果有父级,并且父级没有设置position:父级的子级,自级没有设置position,跟着父级动。
                                     父级的子级,自己设置了position,但没有设置tbrl,跟着父级动,也就是absolute的标签行激活absolute,就必须设置tbrl中的一个值,
                                                                           设置了tbrl,按照浏览器的左上角,如果父级上边有文字或不是absolute标签,那就在它们的下边,(原来脱离文档流,并不是就是所有的位置都不管了,是父级的位置的文档流不管了,)
如果有父级,并且父级设置了position,父级的子级不论有没有设置了tbrl,都参照父级的左上角,并且不受父级的padding的影响
                                                    




position;relative ;标签是relative。relative就是只要有了父级就按照父级的来,而且,relative的元素不管有没有移动,它的本身占的位置还保留,这个效果是对它后来的元素有影响,都会在它的原来的位置后边放。我后来才知道,原来tbrl也可以是负值,而且top向下偏移就是正值,向上偏移就是负值,
当top和bottom同时设置时,是top的值起作用,
当left和right同时存在时,是left的值起作用。


如果没有父级,那子级就参照浏览器,也就是html,
如果没有父级,并且它的上边有文字或其他标签,并且其他标签没有position,那子级就参照上边的文字或标签的下边,
如果没有父级,并且它的上边有文字或其他标签,并且其他标签有position,并且标签position是absolute,那relative标签就参照上边的文字看,而忽略上边absolute的标签,
                                                                    并且标签position是relative,那relative标签就参照上边的文字或标签的下边,
如果有父级,并且父级没有设置position:父级的子级,子级没有设置position,跟着父级动。
                                                  子级设置了position,并且没有设置了tbrl,按照父级的左上角
                                                                              设置了tbrl,还是按照父级的左上角
如果有父级,并且父级设置了position,父级的子级就参照父级的左上角,并且受父级的padding的影响,受padding的影响也就是按照父级的内容区的左上角。


根据 absolute和relative的特点,可以总结到,使用relative的元素来布局页面,
使用属性为absolute的元素来定位某元素在父级中的位置,当然也可以用relative,不要忘了加上padding的值。


对,记住,父标签设置了position,并不是给它的所有子标签也设置了position,并不能这样,因为选择器本身就是对于元素设置 的


想到了float,用浮动float脱离文档流,使用了float,就变成了一个块级元素。在我实验时,变成了一个内联块,想到了float,如果有两个块级元素,默认两个各占一行,如果对第二个使用了float,而第一个没有使用,那么后边的仍不会到第一个div的末尾,只有把第一个div也设置float:样式,第二个才会到了第一个的后边,

先说一下float,用浮动float脱离文档流,使用了float,就变成了一个块级元素。在我实验时,变成了一个内联块,想到了float,如果有两个块级元素,默认两个各占一行,如果对第二个使用了float,而第一个没有使用,那么后边的仍不会到第一个div的末尾,只有把第一个div也设置float:样式,第二个才会到了第一个的后边,
先说一下float,用浮动float脱离文档流,使用了float,就变成了一个块级元素。在我实验时,变成了一个内联块,想到了float,如果有两个块级元素,默认两个各占一行,如果对第二个使用了float,而第一个没有使用,那么后边的仍不会到第一个div的末尾,只有把第一个div也设置float:样式,第二个才会到了第一个的后边,
原创粉丝点击