关于 CSS 的介绍，基本上告一段落了。在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素，显示在 Web 页面的位置。定位 概述 定义元素位置的基准，即：该元素与 HTML 文档流 和 其他 HTML 元素的关系。 四种定位方式 Static（静态定位） 默认值（没有定位），元素出现在正常的 HTML 文档流中 静态定位的元素不会受到 top、bottom、left、right 的影响 Fixed（固定定位） 元素相对于浏览器窗口的位置固定，即：固定在浏览器窗口的固定位置，即使窗口滚动也不会移动 与 HTML 文档流无关，不占据空间 Relative（相对定位） 相对于元素正常位置的定位，其原本所占的空间不会改变 Absolute（绝对定位） 相对于最近已定位的父元素；若没有已定位的父元素，那么将相对于 与 HTML 文档流无关，不占据空间
四种定位方式比较
定位方式 是否与文档流有关 是否占据空间 是否可以重叠 Static 是 是 否 Fixed 否 否 是 Relative 是 是 否 Absolute 否 否 是注意
通过观察表格，大家可以看出：在四中定位方式中，凡是与文档流有关的都会占据文档流空间，且不可重叠；凡是与文档流无关的都不会占据文档流空间，且可以重叠。原因是什么呢？HTML 文档流的布局是流式布局（fluid layout），像流水一样布局，怎么可以重叠，没有空间又怎么能布局元素！
三种定位方式看了上边的描述，你肯定还是一头雾水，不知道这四种定位方式到底说的是什么，在什么时候该用什么方式的定位。在定位一个元素的时候，我们通常需要选择一种定位方式来确定一个元素的布局方式，还需要设置的它的偏移量，那么问题就来了，偏移量的偏移基准是什么？Fixed 该方式定位的元素，设置偏移量的参照基准是浏览器窗口（不完全是） 示例
代码
body { background-color: lightgray;}p.pos_fixed{ position:fixed; background-color: red;} This is a paragrap.
效果
观察发现，元素的左方和上方，会有一定的边距，这是为什么？“这是浏览器为 body 添加的默认边距”，这的这么简单吗？我们来试试。代码
// 改变 body 的样式body { background-color: lightgray; margin: 0px;} 效果
观察发现，元素左边的边距确实没有了，但是上方的边距还在。“这是浏览器为 body 添加的默认填充”，那么我可以明确的告诉你，这不是答案。那么答案到底是什么？
代码
// 改变 .pos_fixed 类的样式p.pos_fixed{ position:fixed; background-color: red; margin: 0px;} 效果
我们惊奇的发现，我们的问题解决了。原来是这样：“浏览器为 p 默认添加了上边距（在 p 前后分别添加一个换行）”，但是对于 Fixed 定位方式，我们还需要注意一点，我们来看看如下效果
代码
// 改变样式表p { margin: 0px;}p.pos_fixed{ position:fixed; background-color: red;}// 改变内容This is another paragrap
This is another paragrap
This is another paragrap
This is another paragrap
This is a paragrap.
This is another paragrap
This is another paragrap
This is another paragrap
This is another paragrap
效果
我们发现，Fixed 定位的元素，确实没有占据了文档流的空间，当滚动内容是，位置也没有变化。但是默认情况下，Fixed 定位的元素的 top 还是会受到文档流的影响的。这与表格中的描述有矛盾，还请大家注意，非常愿意与大家一起探讨原因之所在。
总结 Fixed 方式定位的元素，默认情况下除 top 外不受文档流影响，以浏览器窗口为参照基准；不占据文档流空间；固定在浏览器窗口的某个位置，不随内容的滚动而滚动。（暂且这样理解吧） Relative 该定位方式的元素，设置偏移量的参照基准是元素自身的正常位置 示例代码
body { background-color: lightgray; margin: 0px;}div { width: 100px; height: 60px;}#div1 { background-color: red; top: 10px;}#div2 { background-color: blue;}
查看更多关于CSS3-05样式4_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112378