absolute和relative总结
来源:互联网 发布:武汉火凤凰云计算基地 编辑:程序博客网 时间:2024/06/09 22:01
反正定义为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:样式,第二个才会到了第一个的后边,
阅读全文
1 0
- absolute和relative总结
- position absolute和relative
- position(relative和absolute)
- position:absolute和relative
- relative 和absolute
- relative absolute float 定位总结
- 定位: relative和absolute区别
- relative和absolute 使用感想
- HTML布局relative和absolute
- CSS定位absolute和relative
- position的relative和absolute
- 关于relative和absolute属性
- 正确区分relative 和 absolute
- position中的absolute和relative
- CSS里面position:relative、absolute、static、relative总结
- CSS中relative和absolute浅谈
- HTML中relative和absolute解释
- css中position中的relative和absolute
- mutex&chan
- 【POJ】3180
- 排序之交换排序:冒泡排序and快速排序
- 二进制到八进制的转换
- AVFoundation学习笔记(二):视频播放相关
- absolute和relative总结
- Add Two Numbers II问题及解法
- HDU 6085 Rikka with Candies(bitset操作+思路转化)
- make[2]: *** No rule to make target '/usr/lib/x86_64-linux-gnu/libGL.so'
- redis安装及注意事项
- 01背包,完全背包模板
- Burp Intruder使用
- Gentoo添加用户并配置sudo权限
- AI数学基础(2)——数学期望、方差和最小二乘法