CSS3-05 样式 4_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:16:481063浏览
前言
关于 CSS 的介绍，基本上告一段落了。在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素，显示在 Web 页面的位置。定位
四种定位方式比较
| Static | 是 | 是 | 否 |
| Fixed | 否 | 否 | 是 |
| Relative | 是 | 是 | 否 |
| Absolute | 否 | 否 | 是 |
注意
通过观察表格，大家可以看出：在四中定位方式中，凡是与文档流有关的都会占据文档流空间，且不可重叠；凡是与文档流无关的都不会占据文档流空间，且可以重叠。原因是什么呢？HTML 文档流的布局是流式布局（fluid layout），像流水一样布局，怎么可以重叠，没有空间又怎么能布局元素！
看了上边的描述，你肯定还是一头雾水，不知道这四种定位方式到底说的是什么，在什么时候该用什么方式的定位。在定位一个元素的时候，我们通常需要选择一种定位方式来确定一个元素的布局方式，还需要设置的它的偏移量，那么问题就来了，偏移量的偏移基准是什么？
代码
<!DOCTYPE html><html><head><style>body { background-color: lightgray;}p.pos_fixed{ position:fixed; background-color: red;}</style></head><body><p class="pos_fixed">This is a paragrap.</p></body></html>效果
观察发现，元素的左方和上方，会有一定的边距，这是为什么？“这是浏览器为 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;}// 改变内容<p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p><p class="pos_fixed">This is a paragrap.</p><p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p>效果
我们发现，Fixed 定位的元素，确实没有占据了文档流的空间，当滚动内容是，位置也没有变化。但是默认情况下，Fixed 定位的元素的 top 还是会受到文档流的影响的。这与表格中的描述有矛盾，还请大家注意，非常愿意与大家一起探讨原因之所在。
代码
<!DOCTYPE html><html><head><style>body { background-color: lightgray; margin: 0px;}div { width: 100px; height: 60px;}#div1 { background-color: red; top: 10px;}#div2 { background-color: blue;}</style></head><body><div id="div1"></div><div id="div2"></div></body></html>效果
观察发现，div1 和 div2 按照流式布局，在没有设置定位方式的情况下，设置了 top 是没有任何效果的。原因想必大家都知道，我们来试试设置定位方式后的效果
代码
// 改变 div2 的定位方式，且设置偏移量#div2 { background-color: blue; position: relative; top: -10px; left: 10px;}效果
观察发现，设置定位方式为 relative 后，偏移量产生了效果，相对于正常位置向右向上分别便宜了 10px，且元素可以重叠在一起。我们接下来看看，如何通过 z-index 来控制元素的重叠。
代码
// 改变 div2 的 z-index 属性#div2 { background-color: blue; position: relative; top: -10px; left: 10px; z-index: -1;}效果
改变 div2 的 z-index 后，div2 显示在了 div1 的后边。关于 z-index，我们需要了解以下几点：默认值为 0；只作用于 relative 定位的元素；值大的元素排在前面。
代码
<!DOCTYPE html><html><head><style>body { background-color: lightgray; margin: 20px 20px;}#strap { background-color: green; width: 200px; height: 120px;}#div1 { background-color: red; width: 160px; height: 90px;}#div11 { background-color: blue; width: 100px; height: 40px;}#div12 { background-color: orange; width: 100px; height: 40px;}</style></head><body><div id="strap"> <div id="div1"> <div id="div11"></div> <div id="div12"></div> </div></div></body></html>效果
在未设置定位和，偏移量的情况下，效果如图。我们来设置绝对定位试试。
代码
// 设置 div12 的定位方式为 absolute#div12 { background-color: orange; width: 100px; height: 40px; position: absolute;}效果
观察后，我们发现没有任何效果。若只设置 absolute 定位方式，不设置偏移量，将不会影响元素的布局。接下来我们来设置偏移量。代码
// 设置 div12 的偏移量#div12 { background-color: orange; width: 100px; height: 40px; position: absolute; top: 0px; left: 0px;}效果
观察发现，div12 脱离了文档流，移动到了窗口的左上角，而我们在这里设置了 body 的上边距和左边距。接下来我们来设置 div12 祖先元素的定位。
只有一个定位的父元素
// 设置组向 strap 的定位方式#strap { background-color: green; width: 200px; height: 120px; position: relative;}#div12 { background-color: orange; width: 100px; height: 40px; position: absolute; right: 10px; bottom: 10px;}多个定位的父元素
// 设置 div1 的定位方式#div1 { background-color: red; width: 160px; height: 90px; position: relative;}只有一个定位的父元素
多个定位的父元素
本来想以这篇博客，来结束 CSS 的基础介绍。但是已经写了这么多，还是有很多知识点没有涉及到，我本不是一个拖拖拉拉的人。那么，在接下来的博客，我会继续介绍 CSS 的基础知识。“您好，您的文章知识点丰富，但是从读者的角度想可读性略差，您精通css建议您考虑将页面多少美观，整洁一些，以更好达到分享的目的。” ，这样的消息不知你是否收到过，我是收到过。那么在介绍完 CSS 基础知识后，如果有机会的话，我会详细说说如何来定制自己的博客页面。另外，由于最近在赶一个项目，不常写博客。今天突然发现，有几个消息和评论没有及时的回复，在此我表示抱歉，以后定会在一天内给予回复。你也可以加我的 QQ：1829871867，方便及时的联系我。
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn