admin管理员组文章数量:1610910
其中static是默认值,当元素未定义position或定义position值为static时,该元素内定义的top, bottom, left, right 和 z-index无效。
relative表示相对定位,在文档流中仍然占有空间,其参考对象是离该元素最近的父元素。图1表示父元素的position值变化时,子元素(position=relative)与父元素的相对位置,由图可以看出其相对位置不随父元素的position值变化而变化。
当其父元素position值均为static或者未定义时,其参考对象应该是document(浏览器视窗大小的矩形)而不是网上所说的body元素或者html元素。为验证以上说法 我们设置下面三组对照,代码如图5所示,其中.fixed和.absolute的css样式如图6所示。.absolute始终完全覆盖在.fixed上,由此可见.absolute的位置没有随html元素和body元素的变化而变化,因此其参考对象不是body元素或者html元素。
fixed表示固定定位,类似于absolute,但是其是根据浏览器窗口定位的。
CSS清除浮动
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
清除浮动的8种方式:
1.父级div定义 height
2.结尾处加空div标签 clear:both
3.父级div定义 伪类:after
4. 父级div定义 overflow:hidden
5. 父级div定义 overflow:auto
6、父级div 也一起浮动
7. 父级div定义 display:table
8. 结尾处加 br标签 clear:both
版权声明:本文标题:position属性、CSS清除浮动 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728605933a1165452.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论