原文:CSS设计指南之定位

CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。position属性有4个值:static、relative、absolute、fixed。默认值为static。

一.定位类型

1.静态定位static

在静态定位的情况下,每个元素都处于常规文档流中。它们都是块级元素,所以就会在页面中自上而上的堆叠起来。

2.相对定位

到底相对哪里定位呢,相对的是它原来在文档流中的位置(或者说是默认位置)。

要注意,除了这个元素自己相对于原始位置挪动了一定的位置之外,页面没有发生任何变化。这个元素原来占据的空间没有动。

3.绝对定位

绝对定位跟静态定位及相对定位比,绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来,原来占据的空间会被"回收"。

从上图可以看到,绝对定位的元素完全脱离了常规文档流,它现在是相对于顶级元素body在定位。而这自然而然的引起了一个关于定位的重要概念:定位上下文。

关于定位上下文,首先应该清楚的是:绝对定位元素默认的定位上下文是body元素。关于定位上下文的详细信息接下来再仔细说明。

4.固定定位

从完全脱离文档流的角度说,固定定位与绝对定位类似。但不同之处在于,固定定位的定位上下文是视窗(浏览器窗口或者手持设备的屏幕),因此它不会随页面滚动而滚动。固定定位最常用的情况是创建不随页面滚动而滚动的导航元素。

二.定位上下文

在讲绝对定位的时候,我们了解到绝对定位元素默认的定位上下文是body元素,因为body是标记中所有元素唯一的祖先元素。而实际上,绝对定位元素的所有祖先元素都可以成为它的定位上下文,只要把相应祖先元素的position设定为relative即可。

如上图所示,可能会感觉非常奇怪,为什么inner元素的top、left属性没有起作用。原因在于,内外部div默认都是静态定位,它们之间不存在谁是谁的定位上下文这个问题。只有将元素的position属性设置为relative、absolute、fixed,这个元素的top、right、bottom和left属性才会起作用。

如上图所示,设置了内部div的position属性为absolute之后,内部div就会脱离原来的位置,默认相对于body重新定位。

如上图所示,设置了外部div的position属性为relative值之后,它就变成了内部div的定位上下文。此时内部div的top、left属性参照的就是外部div了。如果你再用left和top属性重新定位外部div,内部div也会跟着移动相同的距离,以保住它与外部div之间的位置关系。

事实上,只要把元素的外边距和内边距设定好,多数情况下只用默认的静态定位就足以实现页面布局了。很多刚接触CSS的初学者(include myself)都会错误的设定position属性,最终发现从文档流中挪出来的元素很难控制。因此,除非真需要那么做,否则不要轻易修改元素默认的position属性。

以上就是我所了解的关于定位的知识,不足之处欢迎指正,因为本人也是在学习交流之中。

CSS设计指南之定位的更多相关文章

  1. 《CSS 设计指南》学习笔记 一

    本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...

  2. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  3. CSS设计指南之浮动与清除

    原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...

  4. CSS 设计指南(第3版) 初读笔记

    第1章 HTML标记与文档结构 关于<title>标签:搜索引擎会给<title>标签中的文字内容赋予很高的权重.而且这些文字也会作为网页标题出现在搜索结果列表中. 无论你想了 ...

  5. CSS设计指南之一 HTML标记与文档结构

    HTML标记与文档结构 之所以从HTML讲起,是因为CSS的用途就是为HTML标记添加样式. 1.1 HTML标记基础 对于每个包含内容的元素,根据它所包含的内容是不是文本,有两种不同的方式给它们加标 ...

  6. CSS设计指南之CSS三种机制:继承、层叠和特指

    一.继承 CSS中的祖先元素也会向后代传递一样东西:CSS属性的值.body元素是所有元素的祖先,所有标签都是它的后代,比如为body元素设置一种字体,那么文档中的所有元素,无论它在层次结构中多么靠下 ...

  7. CSS设计指南之伪类

    伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在 ...

  8. 《CSS设计指南》阅读笔记

    一.HTML实体 HTML实体常用于生成那些键盘上没有的印刷字符.以一个和号(&)开头,一个分号(:)结尾,二者之间是表示实体的字符串. 如:“左引号(")     ”右引号(&qu ...

  9. CSS设计指南之ID属性

    1.用于页内导航的ID ID也可以用在页内导航连接中.下面就是一个链接,其目标是同一页的另一个位置. <a href="#bio">Biography</a> ...

随机推荐

  1. A Game of Thrones(16) - Edard

    “They’ve found her, my lord.” Ned rose quickly. “Our men or Lannister’s?” “It was Jory,” his steward ...

  2. python 学习笔记 10 -- 正則表達式

    零.引言 在<Dive into Python>(深入python)中,第七章介绍正則表達式,开篇非常好的引出了正則表達式,以下借用一下:我们都知道python中字符串也有比較简单的方法, ...

  3. adbetj657k

    http://www.zhihu.com/collection/24337307 http://www.zhihu.com/collection/24337259 http://www.zhihu.c ...

  4. 在 window7 window8下公布webService注意问题

    李石磊 学习日记 错误形如: 解决方式: 1.将服务公布,在IIS下创建虚拟文件夹 2.为上面创建的虚拟文件夹创建单独的应用程序,方法是右击虚拟文件夹.点击"加入应用程序...", ...

  5. 初步C++运算符重载学习笔记&lt;3&gt; 增量递减运算符重载

    初步C++运算符重载学习笔记<1> 初探C++运算符重载学习笔记<2> 重载为友元函数     增量.减量运算符++(--)分别有两种形式:前自增++i(自减--i).后自增i ...

  6. SVNKIT操作SVN版本库的完整例子

    Model: package com.wjy.model; public class RepositoryInfo { public static String storeUrl="http ...

  7. Linux SSH端口转发

    SSH端口转发分为两种,一种是本地端口转发,又称为本地SSH隧道.一直是远程端口转发.SSH端口转发,还必须指定数据传送的目标主机,从而形成点对点的端口转发. 本地端口转发     假定有三台主机A. ...

  8. Harris角点检测算原理

    主要参考了:http://blog.csdn.net/yudingjun0611/article/details/7991601  Harris角点检测算子 本文将该文拷贝了过来,并做了一些数学方面的 ...

  9. Matlab spline

    请记住,,平稳 早期project图时,把富有弹性的细长木条(所谓样条)用压铁固定在样点上,在其它地方让它自由弯曲,然后沿木条画下曲线. 成为样条曲线 三次样条插值(简称Spline插值)是通过一系列 ...

  10. c/c++中main函数参数讲解

    参考地址: http://blog.csdn.net/cnctloveyu/article/details/3905720 我们经常用的main函数都是不带参数的.因此main 后的括号都是空括号.实 ...