这是对position讲解最通俗易懂的版本了。

position

为了制作更多复杂的布局,我们需要讨论下 position 属性。它有一大堆的值,名字还都特抽象,别提有多难记了。让我们先一个个的过一遍,不过你最好还是把这页放到书签里。

static

.static {
  position: static;
}

<div class="static">

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

<div class="relative1">

relative 表现的和 static 一样,除非你添加了一些额外的属性。

</div>

<div class="relative2">

在一个相对定位(position属性的值为relative)的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

</div>

fixed

<div class="fixed">

Hello!暂时不要太关注我哦。

</div>

一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, top 、 right 、 bottom 和left 属性都可用。

我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它,这里有它所使用的CSS:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

一个固定定位元素不会保留它原本在页面应有的空隙。

令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

absolute

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似,除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static 的元素。

这里有一个简单的例子:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

<div class="relative">

这个元素是相对定位的。如果它是 position: static; ,那么它的绝对定位子元素会跳过它直接相对于body元素定位。

<div class="absolute">

这个元素是绝对定位的。它相对于它的父元素定位。

</div>

</div>

这部分比较难理解,但它是创造优秀布局所必需的知识。下一页我们会使用 position做更具体的例子。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

欲练JS,必先攻CSS——前端修行之路

来源:子慕大诗人 http://www.cnblogs.com/1wen/p/6839779.html 今天我讲的主题是css,具体聊一下我大概的css学习历史...

341100
来自专栏IMWeb前端团队

搞定这些疑难杂症,向css3动画说yes

本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3...

38780
来自专栏葡萄城控件技术团队

使用CSS 3创建不规则图形

前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解...

295100
来自专栏练小习的专栏

CSS Hack整理

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我...

21880
来自专栏Micro_awake web

重温CSS3

基础不牢,地动山摇!没办法,只能重温“经典”! 1.CSS3边框:border-radius;  box-shadow;  border-image borde...

39780
来自专栏Micro_awake web

HTML&CSS书写规范

第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

275100
来自专栏代码小睿

一句命令快速合并 JS、CSS

  在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到 10 个或者更多。   而项目上线后...

84490
来自专栏Micro_awake web

谈谈CSS中一些比较"偏门"的小知识 前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获!

前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获! 1.常见的浏览器...

21460
来自专栏Micro_awake web

CSS position &居中(水平,垂直)

css position是个很重要的知识点: 知乎Header部分: ? 知乎Header-inner部分: ? position属性值: fixed:生成绝对...

73390
来自专栏电光石火

CSS几个竖直与水平居中盒子模型

水平居中:text-align: center; 竖直居中:line-height: 30px(30为层高)

24580

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励