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

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

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

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

绝对定位

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

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

位置: 绝对;

顶部: 100像素;

左侧: 100像素;

我们先来看看效果:

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

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

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

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

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

再来看一下效果:

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

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

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

原文发布于微信公众号 - 姬小光(hi-laser)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏飞扬的花生

一步一步学习Bootstrap系列--表单布局

前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把...

370100
来自专栏前端说吧

三种方法解决LI和内部Img的上下间距问题

39860
来自专栏美丽应用

Simple Control:无需Root为设备添加导航栏

15220
来自专栏Google Dart

AngularDart Material Design 工具提示 顶

工具提示卡的目标可以是任何元素,例如按钮,输入,链接等。目标也可以是help_outline图标,其充当实际目标的代理。

11620
来自专栏余生开发

markdown基本语法

markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

12040
来自专栏前端黑板报

小程序--Canvas文字居中

注意红色划线的解释:对齐方式是以 X 的值为基点,然后在看看官网的 setTextAlign 最下面的图:

48820
来自专栏cnblogs

bootstrap源码分析之form、navbar

一、表单(Form) 源码文件: _form.scss mixins/_form.scss 1、按层次结构分:form-group -> form-contr...

24970
来自专栏WindCoder

photoshop技巧之 在排版文字时常会用到的快捷键技巧

这两天兴致来了,又开始了PS学习之旅,看到教程中的思考,不由去网上搜索了一番,暂且记录在这里。

15600
来自专栏大数据钻研

HTML基础

HTML基础 ---- HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、javascript三者的关系 HTML是网页内容...

1.3K30
来自专栏达摩兵的技术空间

css3媒体查询简介

<link rel="stylesheet" media="min-width=900" />

9650

扫码关注云+社区

领取腾讯云代金券