温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS布局模型 之 层模型(position的relative、absolute与fixed区别?)

发布时间:2020-08-06 14:51:12 来源:网络 阅读:1192 作者:艺晨光 栏目:web开发


  css的布局模型分为流动模型(Flow)、浮动模型(Float)、层模型(Layer)。


  浮动模型(Float)和层模型(Layer)有什么显著区别?

    浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动;浮动的元素仍然会占据文档流的物理空间。关于浮动模型的详细说明请看另一篇文章的介绍。http://ycgit.blog.51cto.com/8590215/1958452


  层模型(Layer):设置为层模型的元素已从文档流删除,在文档流上层一层层覆盖,写在后面的层模型元素会覆盖前面层模型元素,层模型元素的定位与文档流无关,只基于带有定位属性(relativeabsolute)的元素或视窗;


    position的relative、absolute与fixed区别?

  这三个定位属性是属于层模型的三种体现形式,另外任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框(有块级元素特性,但不占整行),而不论该元素本身是什么类型。

  使用区别  

  relative 相对定位,以自己当前处于文档流的位置为基准设置偏移量,所以自身在文档流会保持占有固定的物理空间,并且物理空间的位置只受文档流的影响,而不受自身设置偏移量(top/left这些)影响,注意自身设置了margin这类非定位属性也一样改变其在文档流的物理位置。

  absolute 绝对定位,是相对于设置了position为relative或者absolute最近的父级元素定位(body、html标签也需要定位属性才能作为定位父级),如果没有就是基于视窗定位,不占文档流的物理空间。

  fixed 固定定位,是相对于浏览器视窗的,不占文档流的物理空间。


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI