为什么总是要求使用position的时候父类是relative
当我们使用position的时候,一般来说外面的框架是使用relative,里面的元素使用absolute的,这里有两个注意点:
1.如果我们不给父类一个position属性的时候,那么子元素就会以body为参照物,于是东西就自动【跑掉了】,所以父类的position是必不可少的。
2. 如果父类使用的position也是absolute的时候,父类也会一起脱离文档流,使得父元素不占对应的空间从而导致元素崩溃,即——各个元素摆放位置错乱。而且父元素因为是absolute,所以对应的对象变成了body,导致你就只能精巧的计算元素的位置,然后【凭空】放上去。
为什么总是要求使用position的时候父类是relative的更多相关文章
- CSS中position属性 (absolute,relative,static,fixed)
只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...
- css position 应用(absolute和relative用法)
1.absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位 ...
- 【学习笔记】HTML position(static、fixed、relative、absolute)
[本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent"> ...
- 微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
- $(window).scrollTop() 获取当前的鼠标位置 offset.left()指定标签在html中的坐标 offset.top() 指定标签在html中的坐标position() 指定标签相对父(relative)标签的坐标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- position属性的四个value
As we all know, position属性有四个值,分别为 relative,fixed,absolute, static. 1,relative相对定位 (不会脱离文档流) 在一个相对定位 ...
- position&containing block
一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...
随机推荐
- A - 小Y上学记——修学分
A - 小Y上学记——修学分 Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) S ...
- 如何成为出色的IT项目经理:成功的五个关键因素
“出色”的IT 项目经理的定义不是一成不变的.随着经济和商业因素的改变,项目经理的角色进行调整以适应新的需求,迎接新的挑战. 除了一般的困惑之外,还有一种看法就是,在组织中,不同的人对于项目经理的看法 ...
- websphere安装验证报错 忘记密码的配置
http://blog.csdn.net/yulimin/article/details/4048897 ADMU7704E: 在尝试启动与服务器相关联的 Windows 服务时失败:server1: ...
- 十七、oracle 权限
一.介绍这一部分我们主要看看oracle中如何管理权限和角色,权限和角色的区别在哪里.当刚刚建立用户时,用户没有任何权限,也不能执行任何操作.如果要执行某种特定的数据库操作,则必须为其授予系统的权限: ...
- Copy Constructor的构造操作
Copy Constructor的构造操作 有三种情况,会以一个object的内容作为另一个class object的初值: 1. 对一个object做显式的初始化操作 class X{…}; X ...
- JQuery简介及HelloWorld
一.JQuery是什么: -JQuery是一个JavaScript框架. 二.JQuery的优点: –轻量级 –强大的选择器 –出色的 DOM 操作的封装 –可靠的事件处理机制 –完善的 Ajax – ...
- nodejs【伪】入门教程
声明: 本文适合白的不能再白的小白 不要被标题误导,本文不会讲nodejs基础,只是本人学习流程和资料的一个整合 如果想找一大堆教程自己看,没有电梯,自己拉到文章最下方吧 一.nodejs是什么 ...
- 模仿QQ客户端和服务器(支持window和linux)
界面部分我还没有想好,到底是用MFC还是duilib呢? 好吧我先发一个demo版本,功能都有,以下为功能展示. 先说服务器(这个有俩个版本,支持win和linux):用的数据库为MYsql(因为是便 ...
- VBS 自动发送邮件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- hdu_5762_Teacher Bo(鸽笼原理)
题目链接:hdu_5762_Teacher Bo 题意: 给你n个点,问你能否找到两对点的曼哈顿距离相等 题解: 最开始看到这题,看数据以为要向nlogn的复杂度发展,结果经验误导了自己,我们仔细观察 ...