专栏首页姬小光小鸡君の前端小姜汤【第015期】- 绝对定位

小鸡君の前端小姜汤【第015期】- 绝对定位

前面我们学过了“表格布局”(回复 007 或 7)的简单栗子,如果大家用心尝试的话,应该已经可以做出一些粗糙的页面了。

但是前面我们也说过,表格布局几乎已经是被淘汰的技术,只有在 EDM 邮件页面中才会用到,还有一些对代码质量要求不高的快速页面会用。

那么这一期,我们来了解一点真正的 CSS 布局技术。首先我们从最简单的绝对定位开始,因为它最容易理解。

绝对定位

依然遵从我们的原则,不讲原理,不贴文档,直接从代码栗子开始。接上期的代码例子,我们在内联样式中写一段定位代码:

大家请看代码,里面的属性和值几乎可以直译成中文了:

位置: 绝对;

顶部: 100像素;

左侧: 100像素;

我们先来看看效果:

上面的代码中就是所说的“绝对定位”,默认情况下,它是相对于文档根元素(html 或 body)来定位的。

还有一种情况,就是当它的祖先元素中有定位元素时,它的位置就是相对于这个定位元素的。例如:

这里 h1 包含的 a 元素就是 h1 的后代元素。它们的“辈分”是靠包含关系确定的,多包含一层就变爹,再包一层就变爷爷~

那么既然 a 是 h1 的后代元素,且 h1 已经应用了绝对定位,那么 h1 就是所谓的“定位祖先”了。

如果 a 再应用绝对定位的话,就是相对于 h1 目前的左上角来定位的:

再来看一下效果:

这里给 a 设置的 50px,位置已经是从 h1 左上角开始计算的了。这里还有一点要注意,之所以说“定位祖先”,而没有说定位的爹,就意味着,中间有多少层都没关系。

但是,只要有应用了定位的,那参考位置就变为定位元素的左上角。如果有多个定位祖先,则只相对于离自己最近的那个,即“辈分”或者说层级相差最少的那个祖先。

大家消化一下,有什么问题请留言给小鸡君~

本文分享自微信公众号 - 姬小光(hi-laser),作者:有个网友名叫

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-07-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【第012期】如何设置页面锚点

    不知道大家有没有注意到,在我们上网的时候,会看到有些链接打开之后可以直接定位到页面的某个位置处。

    姬小光
  • 收藏 | 产品经理不可不知的 7 种技术思维

    我们常说,作为技术人员要有产品思维,从产品和运营的角度去思考技术方案。是的,我们也这样做了。然而,从我多年的需求沟通及项目协调的经验来看,产品人员其实也可以有一...

    姬小光
  • 为什么你总是不中奖?

    那么,除了那句冷冰冰的“该活动最终解释权归 xxx 公司所有”之外,我们还能否了解更多关于抽奖逻辑的信息呢?答案是肯定的。本文中姬小光将向大家展示,一些基本的概...

    姬小光
  • 前端周刊-(2018年09月第2周)

    let,const 箭头函数 模板字符串 解析结构 函数默认参数 展开运算符 对象字面量与class Promise

    前端迷
  • 定位

    定位元素位置控制 top/right/bottom/left 定位元素偏移量。

    河湾欢儿
  • 网站布局中的三种定位级

    第1种定位级:块对象默认定位级 此定位级特点:块对象默认情况下跟据其出现顺序上下安排布局 下图中是用块对象默认定位级排列的一个大容器包着三个小容器: ? 第2种...

    用户1730674
  • HTML定位简介

    定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。

    大眼瞪小眼
  • 三分钟科普:LBS定位能力以及应用

    打开天气软件展示深圳天气、点外卖定位当前是大族科技大厦,这些习以为常的服务背后是怎么样的流程?

    刘小备
  • 前端成神之路-定位

    标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 (天空)

    海仔
  • 老司机揭秘手机定位技术,这下彻底明白啦!

    每一个人,每一件物品,在这个地球上都有一个空间位置信息,这就是定位。它非常重要,我们靠它来找到这个人或这件物。

    鲜枣课堂

扫码关注云+社区

领取腾讯云代金券