您现在的位置是：网站首页> 编程资料编程资料
CSS学习之五 定位布局 _CSS教程_CSS_网页制作_
2023-10-30
176人已围观
简介 定位的原理很简单，利用定位，可以准确的定义元素框对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一、定位属性的基本情况
使用position属性对元素进行定位：
position属性
值：static | absolute | fixed | relative
初始值：static
运用范围：所有元素
继承值：无
计算值：根据指定确定
static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素定位后生成一个块级框，而无论原来它在正常流中生成何种类型的框。
fixed：元素框表现类似于absolute，不过其包含块是视窗本身。
二、解释定位元素的包含块
假设有如下所示HTML结构：
给它添加如下样式：
* { margin: 0; padding: 0; }
body { font: 12px/1.5 Tahoma, Verdana, "宋体", sans-serif; padding: 50px; }
div { margin-top: 5px; }
.conclusion { margin: 300px 50px ; }
h1, strong { color: red; }
strong, em { font-style: normal; font-weight: normal; }
/* 以上是所有Demo公共样式，下面的Demo中省略 */
.father { background-color: #999; width: 200px; height: 200px; }
.position_a { position: absolute; top: 100px; left: 0px; }
效果比较简单，就是一个紧贴着窗口左边且距离窗口上端100px的盒子，请单击查看Demo
有如下结论：
在HTML中，根元素的包含块就是html元素。
说明：为了直观地查看，实例采用绝对定位方式
下面说明包含块不是根元素的情况：
HTML结构：
包含块是块级框
相对定位的内联框。相对于内联父元素顶部偏移10px，左边偏移10px包含块是内联框
样式：
.position_r { position: relative; top: 10px; left: 10px; }
效果截图：
下面说明非根元素做包含块的一种情况： 如果定位的元素其position值是relative或static，包含块则由最近的块级框、表单表格或者行内块级祖先元素的内容边界组成。
接着展示相对定位的元素与其包含块的边距问题，结构如下：
定位盒子的父元素
相对定位的内联框,相对于父元素左边偏移30px，顶部偏移20px。包含块是内联框
之所以只向顶部偏移20px而不是30px，是因为内联元素上下边距合并所致。在IE6、IE7下相对定位的子元素span距离顶部10px（父元素溢出部分被隐藏）。
样式：
.padding { padding: 10px 0 0 10px; }
.margin { margin: 10px 0 0 10px; }
效果截图：
结论：对于相对定位的元素，其margin值仍然起作用，并且向父元素的内边距靠齐。
下面展示非根元素做包含块的另一种情况，HTML结构如下：
块级父元素
块级父元素
行内父元素绝对定位的行内元素。
相对于父元素顶部偏移10px，左边偏移10px（父元素有左、上内边距）。IE6下宽度不受行内父元素限制。
行内父元素绝对定位的行内元素。
相对于父元素顶部偏移20px，左边偏移20px（子元素有左、上外边距）。IE6下宽度不受行内父元素限制。
样式同上，效果截图如下：
块级元素的情况
行内元素的情况
结论：一个非根元素，如果是绝对定位，则它的包含块设置为离它最近的position值不是static的祖先元素。
如果这个祖先元素是块级元素，包含块则设置为该祖先元素的边框的内边界。
如果这个祖先元素是行内元素，包含块则设置为该元素的内容边界。以从左向右读的语言为例，该元素的上、左边界是其祖先元素中第一个框内容区的上、左边界；该元素的下、右边界是其祖先元素中最后一个框内容区的下、右边界。
三、浏览器对作为定位元素的内联元素的处理
对于块级元素，无论是否定位，元素均作块级元素处理，而行内元素绝对定位时，当做块级元素处理。假如有如下HTML：
绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内子元素.绝对定位的行内子元素.绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.
给它添加如下样式：
.wrapper { background-color: #DDD; width: 400px; height: 100px; }
.father { background-color: #CCC; border: 1px solid red; }
.p_r { position: relative; }
.p_a { position: absolute; top: 10px; left: 10px; }
#p_a { position: absolute; }
.margin { margin-left: 20px; margin-top: 20px; }
.padding { padding-left: 20px; padding-top: 20px; }
所得效果截图：
结论：
- 相对定位时，作为内联元素处理。
- 绝对定位时，作block元素处理(可设置宽高)。
1、相对定位的情况：
HTML结构：
相对定位的内联框包含块是内联框
效果截图：
相对定位元素的宽高
结论：
- 相对定位元素不能用top,left,right,bottom关键字指定宽高（此时right和bottom值被忽略），必须用width和height指定。
- 相对定位的内联元素不可以设置宽高。
2、绝对定位的情况：
HTML结构：
top: 10px; right: 10px; bottom: 10px; left: 10px;
top: 10px; right: 10px; bottom: 10px; left: 10px; width: 100%;
top: 10px; right: 10px; bottom: 10px; left: 10px; width: auto;
行内父元素绝对定位的行内元素。这里可以设置其宽高。IE6下宽度不受行内父元素限制。
效果截图：
绝对定位元素的宽高1
绝对定位元素的宽高2
结论：
- 非IE6下，绝对定位元素可以用top,left,right,bottom关键字指定宽高（注意对比，需结合width指定才行），也可以用width和height指定。
- 绝对定位的内联元素也可以设置宽高。
- 事实上，绝对定位的元素宽度有以下规则：left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=包含块width。
- IE6下绝对定位的行内元素宽度不受父元素限制。
五、定位元素在z轴上的放置
以下是CSS2.1关于z-index属性的一些说明：
auto:默认值。遵从其父对象的定位
number:无单位的整数值。可为负数
检索或设置对象的层叠顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。
假设有如下HTML结构：
提示：
本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
