定位

定位的想法很简单元素框相对于正常位置出现在哪里。

定位:static,相对, 绝对, fixed, 继承

static就是默认的位置

相对就是相对于默认位置的偏移。原来的static定位位置依然占着。

绝对定位相对于包含块(非static的)的偏移。完全脱离文档流,原来的位置就没了。

fix相对于viewport视窗的偏移。

包含块

根元素是初始包含块,有的浏览器是html元素,有的为body。

非根元素,position为相对或者默认位置,包含块是最近祖先级的块级框、表格单元、行内块。

非根,position为绝对,包含块为最近的非static的祖先元素。

如果是块级,包含块的边界是包含块的内边界。

如果是行内,包含块是行框的边界。

如果没有祖先,包含块是初始包含块。

包含块(containing box)其实就是定位上下文。理解成给position定位的参考环境。

偏移属性

有了参考环境,在二维上,上下左右的偏移多少呢?

这个属性的值,可以为长度、百分比、auto、inherit

值可以为负数,就是反方向的偏移。

长度好理解,百分比即为包含块的值的百分比。比如top/bottom 10% 就是包含块高的百分之10,如果left/right就是宽度的。

发现了一个问题,如果一个定位为relative的元素的包含块高度未设置,应该为auto的话。top/bottom设置为百分比的值。浏览器(firefox38)会忽略掉这个百分比的值。

参考:

Last Comment Bug 260348 - Relative positioning with percentages inside auto-height containing block does not work

https://bugzilla.mozilla.org/show_bug.cgi?id=260348

CSS权威指南 - 基本视觉格式化 1的更多相关文章

  1. css权威指南-基本视觉格式化(水平与垂直)

    1.基本概念     (1)正常流:是指西方语言文本从左向右,从上向下显示.如果要让一个元素不在正常流中国,唯一的办法                     就是使之成为浮动或定位元素.     ( ...

  2. CSS权威指南 - 基本视觉格式化 4

    改变元素显示 没有讨论与表格相关的.列表list-item的值.之后讨论. 改变显示角色 显示为块级元素 将一串链接(行内元素)改变垂直放置,若有如下一连串的链接: <div id=" ...

  3. CSS权威指南 - 基础视觉格式化 2

    行内元素 em a 非替换元素 img 替换元素 两者在内联内容处理方式不一样. inline有时候被翻译成内联,比如inline content,有时候被翻译成行内 inline box. 行布局 ...

  4. CSS权威指南 - 基础视觉格式化 3

    行内替换元素 替换元素比如图片的高度比line-height大,并不会影响整个文字段落的line-height,会让有图片那一行框的高度可以容纳这个图片. 这个图片依然有一个line-height,和 ...

  5. 《CSS权威指南》基础复习+查漏补缺

    前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...

  6. CSS权威指南 - 层叠

    CSS权威指南 第三章结构与层叠 - 层叠 按权重及来源排序 1. Reader important declarations 2. Author important declarations 3. ...

  7. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  8. css权威指南读书笔记-第10章浮动和定位

    这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...

  9. css权威指南读书笔记

    今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...

随机推荐

  1. 读取STL模型

    读取二进制格式的STL模型文件 std::ifstream fin;fin.open(stlFilePath, std::ios::in | std::ios::binary);bool isBina ...

  2. Window环境下Python和Django的安装

    转载地址:http://blog.csdn.net/haoni123321/article/details/7593821 1.下载python,本文使用python-2.7.2.msi 2.下载dj ...

  3. CI中REST URL含有中文怎么处理(报错:The URI you submitted has disallowed characters)

    解决方法: 客户端在发送GET URL请求的时候,将含有中文的URL编码即可 比如: 原始:http://localhost/qk/rest/user_album_api/get_user_album ...

  4. ORA-00824:cannot set SGA_TARGET or MEMORY_TARGET due to existing internal settings

    练习时执行一条修改数据库连接数的语句: alter system set processes=1 scope=spfile; 然后关闭数据库: shutdown 再启动数据库时,出现异常,报错信息如下 ...

  5. mingw64环境搭建

    转自:http://www.cr173.com/soft/132367.html MinGW64位版,默认编译出来是64位的,需要编译32位请使用-m32 参数!mingw是一款gnu工具集合是Min ...

  6. BZOJ 1821 JSOI2010 部落划分 Group prim

    Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...

  7. C#环境datagidview添加删除操作

    添加 行 dataGridView1.Rows.Add();//添加空行 dataGridView1.Rows.Add("a","b"……);//添加指定列数的 ...

  8. python 返回函数

    返回函数 Python的函数不但可以返回int.str.list.dict等数据类型,还可以返回函数! 例如,定义一个函数 f(),我们让它返回一个函数 g,可以这样写: def f(): print ...

  9. DOM--1 遵循最佳实践

    为重用命名空间而进行规划 (function() { function $(id) { return document.getElementById(id); } function alertNode ...

  10. js:数据结构笔记10--图和图算法

    图:是由边和定点的集合组成:  按照图的定点对是否有序可以分为:有向图和无向图:  路径:所有顶点都由边连接构成:路径长度为第一个定点到最后一个顶点之间的数量:  环:指向自身的顶点,长度为0:圈:至 ...