css——定位

  • 时间:2018-07-21 23:31 作者:专注做前端 来源:专注做前端 阅读:265
  • 扫一扫,手机访问
摘要:CSS定位机制CSS 有三种基本的定位机制:相对定位、浮动和绝对定位。相对定位相对定位指的是设置为相对定位的元素框会偏移某个距离。元素依然保持其未定位前的形状,它本来所占的空间仍保留。假如将box2的框 top 设置为 50px,那么框将在原位置顶部下面 50 像素的地方。假如 left 设置为 2

CSS定位机制

CSS 有三种基本的定位机制:相对定位、浮动和绝对定位。

相对定位

相对定位指的是设置为相对定位的元素框会偏移某个距离。元素依然保持其未定位前的形状,它本来所占的空间仍保留。

假如将box2的框 top 设置为 50px,那么框将在原位置顶部下面 50 像素的地方。假如 left 设置为 20 像素,那么会在元素左边创立 20 像素的空间,也就是将元素向右移动。

只需box2设置了position为relative ,box1和box3始终不会由于box2的改变而改变。




相对定位




box1

box2

box3




css——定位

浮动

浮动的框可以向左或者向右移动,直到它的外边缘碰到包含框或者另一个浮动框的边框为止。

因为浮动框不在文档的普通流中,所以文档的普通流中的块框体现得就像浮动框不存在一样。

1.当都不设置浮动时:




浮动




box1

box2

box3



css——定位

2.当设置box1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。由于它不再处于文档流中,所以它不占据空间,实际上覆盖住了box1 2,使box12 从视图中消失。



不设置浮动




box1

box2

box3



css——定位

3.当都设置为浮动时,box1 向左浮动直到碰到包含框,另外两个box向左浮动直到碰到前一个浮动框。




不设置浮动




box1

box2

box3



css——定位

4.清理浮动,要想阻止行框围绕浮动框,需要对该框应使用 clear 属性。clear 属性的值可以是 left、right、both 或者 none,它表示框的哪些边不应该挨着浮动框。

详细的可以参考:http://www.w3school.com.cn/css/css_positioning_floating.asp

绝对定位

设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者者是初始包含块。元素原价在正常文档流中所占的空间会关闭,就如同该元素原来不存在一样。元素定位后生成一个块级框,而不管原来它在正常流中生成何种类型的框。

绝对定位的元素的位置相对于最近的已定位祖先元素,假如元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

由于绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

当设置box2的position为absolute时,它就会脱离文档,相当于不存在。




绝对定位




box1

box2

box3



css——定位

文/丁向明

做一个有博客的web前台自媒体人,专注web前台开发,关注使用户体验,加我qq/微信交流:6135833

http://dingxiangming.com

  • 全部评论(0)
上一篇:CSS 按钮
下一篇:Vue.js入门(5)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部