CSS3-05 样式 4_html/css_WEB-ITnose

四种定位方式比较

注意

通过观察表格，大家可以看出：在四中定位方式中，凡是与文档流有关的都会占据文档流空间，且不可重叠；凡是与文档流无关的都不会占据文档流空间，且可以重叠。原因是什么呢？HTML 文档流的布局是流式布局（fluid layout），像流水一样布局，怎么可以重叠，没有空间又怎么能布局元素！

代码

 
 
This is a paragrap.

效果

代码

// 改变 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 还是会受到文档流的影响的。这与表格中的描述有矛盾，还请大家注意，非常愿意与大家一起探讨原因之所在。

代码

效果

观察发现，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 定位的元素；值大的元素排在前面。

代码

效果

在未设置定位和，偏移量的情况下，效果如图。我们来设置绝对定位试试。

代码

// 设置 div12 的定位方式为 absolute#div12 {    background-color: orange;    width: 100px;    height: 40px;    position: 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;}

只有一个定位的父元素

多个定位的父元素