博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一文读懂css的四种定位
阅读量:3958 次
发布时间:2019-05-24

本文共 507 字,大约阅读时间需要 1 分钟。

一、普通定位(Static)

在我们的开发过程中,除非专门指定,否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。这个就不过多描述了。

二 . 相对定位(relative)

在我们前端开发中,relative相对定位一直被看作普通文档流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

在这里插入图片描述

结果
在这里插入图片描述

三 . 绝对定位(absolute)

在前端开发中,相对于已定位的最近的父类元素,如果没有已定位的最近的父类元素,那么它的位置就相对于最初的包含块(如body)。绝对定位的框可以从它的包含块向上、右、下、左移动。

在这里插入图片描述
结果
在这里插入图片描述

四 .固定定位(fixed)

相对于浏览器窗口,其余的特点类似于绝对定位。fixed元素就是固定在浏览器某个位置的元素,绝对定位是固定在页面的,如果滚动滚动条的话绝对定位的元素也会滚上去,fixed元素不会。

觉得写得不错的话,请用你们发财的小手点个赞叭!

转载地址:http://eiozi.baihongyu.com/

你可能感兴趣的文章
编写跨平台Java程序注意事项
查看>>
富人和穷人的12个经典差异
查看>>
java 注意事项[教学]
查看>>
MetaWeblogAPI测试
查看>>
软件配置管理概念-1,介绍
查看>>
软件配置管理概念-2,用户角色
查看>>
软件配置管理概念-3,CM系统的概念
查看>>
JSP/Servlet应用程序优化八法
查看>>
人生必修的181条佛理
查看>>
The Most Widely Used Java Libraries
查看>>
简单在单机使用apache-james(开源邮件服务器)
查看>>
lsof 快速起步
查看>>
使用ScribeFire方便地发布blog
查看>>
跨平台Java程序注意事项
查看>>
Python字符与数字的相互转换
查看>>
C 指针解读
查看>>
有关乱码的处理---中国程序员永远无法避免的话题
查看>>
JSP的运行内幕
查看>>
python超简单的web服务器
查看>>
代理模式、静态代理、动态代理、aop
查看>>