CSS学习之五 定位布局
建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
一、定位属性的基本情况
使用position属性对元素进行定位
position属性
值static | absolute | fixed | relative
初始值static
运用范围所有元素
继承值无
计算值根据指定确定
static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素定位后生成一个块级框，而无论原来它在正常流中生成何种类型的框。
fixed元素框表现类似于absolute，不过其包含块是视窗本身。
二、解释定位元素的包含块
假设有如下所示HTML结构
复制代码
代码如下:<div class="father position_a">距离窗口上端100px，距离窗口左端0px</div>
给它添加如下样式
复制代码
代码如下:{ margin: 0; padding: 0; }
body { font: 12px/1.5 Tahoma, Verdana, "宋体", sans-serif; padding: 50px; }
div { margin-: 5px; }
.conclusion { margin: 300px 50px ; }
h1, strong { color: red; }
strong, em { font-style: normal; font-weight: normal; }
/ 以上是所有Demo公共样式，狼蚁网站SEO优化的Demo中省略 /
.father { background-color: #999; width: 200px; height: 200px; }
.position_a { position: absolute; : 100px; left: 0px; }
效果比较简单，就是一个紧贴着窗口左边且距离窗口上端100px的盒子，请单击查看Demo
有如下结论
在HTML中，根元素的包含块就是html元素。
说明为了直观地查看，实例采用绝对定位方式
狼蚁网站SEO优化说明包含块不是根元素的情况
HTML结构
复制代码
代码如下:<div class="father">
<div class="child position_r">相对定位的盒子。相对于块级父元素顶部偏移10px，左边偏移10px</div>
包含块是块级框
</div>
<div class="father">
<span class="father"><span class="child position_r">相对定位的内联框。相对于内联父元素顶部偏移10px，左边偏移10px</span>包含块是内联框</span>
</div>
样式
复制代码
代码如下:.position_r { position: relative; : 10px; left: 10px; }
效果截图
狼蚁网站SEO优化说明非根元素做包含块的一种情况
如果定位的元素其position值是relative或static，包含块则由最近的块级框、表单表格或者行内块级祖先元素的内容边界组成。
接着展示相对定位的元素与其包含块的边距问题，结构如下
复制代码
代码如下:<div class="father padding">
<div class="child position_r margin">相对定位的盒子。相对于父元素顶部偏移30px，左边偏移30px</div>
定位盒子的父元素
</div>
<div class="father">
<span class="father padding"><span class="child position_r margin">相对定位的内联框,相对于父元素左边偏移30px，顶部偏移20px。</span>包含块是内联框</span>
<p>
<em>之所以只向顶部偏移20px而不是30px，是因为内联元素上下边距合并所致。在IE6、IE7下相对定位的子元素span距离顶部10px（父元素溢出部分被隐藏）。</em></p>
</div>
样式
复制代码
代码如下:.padding { padding: 10px 0 0 10px; }
.margin { margin: 10px 0 0 10px; }
效果截图
结论对于相对定位的元素，其margin值仍然起作用，并且向父元素的内边距靠齐。
狼蚁网站SEO优化展示非根元素做包含块的另一种情况，HTML结构如下
复制代码
代码如下:<div class="wrapper position_r padding">
<div class="child position_a">绝对定位的盒子。相对于父元素顶部偏移10px，左边偏移10px，说明父元素padding无效。</div>
块级父元素
</div>
<div class="wrapper position_r">
<div class="child position_a margin">绝对定位的盒子。相对于父元素顶部偏移20px，左边偏移20px，说明绝对定位元素可以有外边距。</div>
块级父元素
</div>
<div class="wrapper">
<span class="father position_r padding">行内父元素<span class="child position_a">绝对定位的行内元素。</span></span>
<p>
<em>相对于父元素顶部偏移10px，左边偏移10px（父元素有左、上内边距）。IE6下宽度不受行内父元素限制。</em></p>
</div>
<div class="wrapper">
<span class="father position_r">行内父元素<span class="child position_a margin">绝对定位的行内元素。</span></span>
<p>
<em>相对于父元素顶部偏移20px，左边偏移20px（子元素有左、上外边距）。IE6下宽度不受行内父元素限制。</em></p>
</div>
样式同上，效果截图如下
块级元素的情况
行内元素的情况
结论一个非根元素，如果是绝对定位，则它的包含块设置为离它最近的position值不是static的祖先元素。
如果这个祖先元素是块级元素，包含块则设置为该祖先元素的边框的内边界。
如果这个祖先元素是行内元素，包含块则设置为该元素的内容边界。以从左向右读的语言为例，该元素的上、左边界是其祖先元素中第一个框内容区的上、左边界；该元素的下、右边界是其祖先元素中一个框内容区的下、右边界。
三、浏览器对作为定位元素的内联元素的处理
对于块级元素，无论是否定位，元素均作块级元素处理，而行内元素绝对定位时，当做块级元素处理。假如有如下HTML
复制代码
代码如下:<div class="wrapper padding">
<span class="father p_r">相对定位的行内父元素.相对定位的行内父元素.相对定位的行内父元素.<a href="#" class="p_a">绝对定位的行内子元素.绝对定位的行内子元素.</a>相对定位的行内父元素.相对定位的行内父元素.相对定位的行内父元素.
</span>
</div>
<div class="wrapper p_r">
<span class="father margin" id="p_a" style="width: 90%; height: 80px; ">绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.<a href="#" class="p_a" >绝对定位的行内子元素.绝对定位的行内子元素.</a>绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.
</span>
</div>
给它添加如下样式
复制代码
代码如下:.wrapper { background-color: #DDD; width: 400px; height: 100px; }
.father { background-color: #CCC; border: 1px solid red; }
.p_r { position: relative; }
.p_a { position: absolute; : 10px; left: 10px; }
#p_a { position: absolute; }
.margin { margin-left: 20px; margin-: 20px; }
.padding { padding-left: 20px; padding-: 20px; }
所得效果截图
结论
- 相对定位时，作为内联元素处理。
- 绝对定位时，作block元素处理(可设置宽高)。
1、相对定位的情况
HTML结构
复制代码
代码如下:<div class="father">
<div class="child position_r" style=": 10px; right: 10px; bottom: 10px; left: 10px;">相对定位元素</div>
</div>
<div class="father">
<span class="father"><span class="child position_r" style="bottom: 10px; left: 10px; width: 100%;">相对定位的内联框</span>包含块是内联框</span>
</div>
效果截图
相对定位元素的宽高
结论
- 相对定位元素不能用,left,right,bottom关键字指定宽高（此时right和bottom值被忽略），必须用width和height指定。
- 相对定位的内联元素不可以设置宽高。
2、绝对定位的情况
HTML结构
复制代码
代码如下:<div class="father position_r">
<div class="child position_a" style=": 10px; right: 10px; bottom: 10px; left: 10px; ">绝对定位元素，可以用,left,right,bottom关键字结合width指定宽高。IE6浏览器下不可以。
: 10px; right: 10px; bottom: 10px; left: 10px; </div>
</div>
<div class="father position_r">
<div class="child position_a" style=": 10px; right: 10px; bottom: 10px; left: 10px; width: 100%; ">绝对定位元素，可以用,left,right,bottom关键字结合width指定宽高。IE6浏览器下不可以
: 10px; right: 10px; bottom: 10px; left: 10px; width: 100%; </div>
</div>
<div class="father position_r">
<div class="child position_a" style=": 10px; right: 10px; bottom: 10px; left: 10px; width: auto; ">绝对定位元素，可以用,left,right,bottom关键字结合width指定宽高。IE6浏览器下不可以。
: 10px; right: 10px; bottom: 10px; left: 10px; width: auto; </div>
</div>
<div class="father">
<span style=" border: 1px solid #999; " class="position_r">行内父元素<span class="child position_a" style=" : 10px; left: 10px; width: 100%;">绝对定位的行内元素。这里可以设置其宽高。IE6下宽度不受行内父元素限制。</span></span>
</div>
效果截图
绝对定位元素的宽高1
绝对定位元素的宽高2
结论
- 非IE6下，绝对定位元素可以用,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结构
复制代码
代码如下:<div class="father position_r">
<div class="child position_a" id="box_red">(z-index: 30;)
<div class="subChild" id="subChild_tl">(z-index: auto;)
我是红色大盒子的子盒子</div>
<div class="subChild" id="subChild_bl">(z-index: 29;)
我是红色大盒子的子盒子</div>
<div class="subChild" id="subChild_br">(z-index: 9;)
我是红色大盒子的子盒子</div>
<div class="subChild" id="subChild_extra1">
(z-index: -1000;)
我是红色大盒子的子盒子</div>
</div>
<div class="child position_a" id="box_green">(z-index: 10;)
<div class="subChild" id="subChild_extra2">
(z-index: 2000;)
我是绿色大盒子的子盒子</div>
</div>
<div class="child position_a" id="box_blue">(z-index: 20;)
<div class="subChild" id="subChild_extra3">
(z-index: 1000;)
我是蓝色大盒子的子盒子</div>
</div>
</div>
添加如下样式
复制代码
代码如下:.position_r { position: relative; }
.position_a { position: absolute; }
#box_red { background: red; z-index: 30; : 100px; left: 100px; }
#box_green { background: green; z-index: 10; : 200px; left: 200px; }
#box_blue { background: blue; z-index: 20; : 300px; left: 300px; }
.subChild { width: 100px; height: 100px; text-align: left; position: absolute; }
#subChild_tl { background: green; : -50px; left: -50px; z-index: auto; }
#subChild_bl { background: blue; bottom: 0px; left: 0px; z-index: 29; }
#subChild_br { background: red; bottom: -50px; right: -50px; z-index: 9; }
#subChild_extra1 { background: maroon; width: 150px; height: 150px; : 20px; right: 20px; z-index: -1000; }
#subChild_extra2 { background: orange; width: 150px; : 80px; left: -70px; z-index: 2000; }
#subChild_extra3 { background: gold; : 30px; left: -25px; z-index: 1000; }
效果截图
有如下结论
- 默认(z-index: auto;)情况下，所有绝对定位的元素根据其在文档中出现的顺序显示。
- 为z-index赋值之后，绝对定位的叠加依赖于父元素的z-index值，值越大越显示在上层。
- 隶属于同一父元素的同级兄弟元素，根据其z-index值确定其在z轴上的顺序，值越大越显示在上层。
- 隶属不同父元素的同级元素，其在z轴上的顺序将由它们的父元素的z-index值确定，而与它们本身的z-index值无关。
- z-index: auto;等价于z-index: 0;
可以这么说对于绝对定位的元素，父元素在z轴上的顺序将决定他所有后代元素在z轴上的顺序，z-index值大的父（祖先）元素将使得它的子孙元素优先显示。
或者您这么理解确定绝对定位元素叠加顺序时，纵向比较父元素的z-index值大小，横向比较兄弟元素z-index大小，值越大越显示在上层。
说明以上所有截图均来自FF 3.6，无特别说明的地方，均已兼容其他（主流）浏览器。笔者水平有限，有错误的地方请指正！
注内容参考《CSS权威指南》（第三版）
上一篇：CSS3实战第一波 让我们尽情的圆角吧
下一篇：CSS学习之四 浮动
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML