首页 > 代码库 > css定位问题的记录
css定位问题的记录
postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。
float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。
二者之中最大的差别就是位置保留。
包裹性
包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。哦,举个例子吧,如下测试代码:
.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; } .abs { position:absolute; }
html:
<div class="div"> <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /> <p>无absolute</p> </div> <div class="div abs"> <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /> <p>absolute后</p> </div>
结果
css定位问题的记录
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。