您的位置：首页 > 其它

网页设计大赛第十四天

2015-11-29 22:33 218 查看

绝对定位布局

1: 通过设置postion属性实现，css中规定的第三种定位机制。

2: 能够实现横向多列布局及较为复杂的定位，比如带有遮罩层效果的提示框、固定层效果、全屏广播

3:position 属性拥有3种定位形式 1、静态定位 2、相对定位3、绝对定位

   可设置4个属性值：

1.static（静态定位）--元素没有设置position定位时的默认状态，元素还处于标准文档流中

2.relative（相对定位）

3.absolute（绝对定位）

4.fixed（固定定位）——同属于绝对定位

5.float与absolute的区别和联系：

   float会让周围的不是块级的元素把自己按照先后顺序围绕起来，float和absolute都会使元素脱离文档流，感觉就像一块木头，从水面上飘了起来，脱离了水面，后边的元素就可以上来了。脱离文档流的元素的宽度和高度是由元素里边的内容决定的，而父元素如果没有设置高度，那么脱离文档流的元素原来在文档流中的位置就会消失或者被后来元素替补。

float 和absolute的区别在于设置float后周围非块状元素会来包围float元素，float元素的位置可能会改变。而设置absolute后，元素如果不设置位置，那么元素会漂浮在原来位置上空。

1、相对定位

特点：相对于自身原有位置进行偏移

元素仍处于标准文档流中

随即拥有偏移属性和z-index属性

移动同时会将浏览器撑开

2、绝对定位

建立了以包含块位基准的定位

完全脱离标准文档流

随即拥有偏移属性跟z-index属性

       未设置偏移量时：

无论是否存在已经定位的祖先元素，都保持在元素初始位置脱离标准文档流

       设置偏移量时：

偏移参照的基准：

无已定位的祖先元素：以<html>为偏移参照基准

有已定位的祖先元素：以距其最近的已定位的祖先元素为偏移参照基准

注意：当一个元素设置了绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。

使用absolute实现横向两列布局：（不常用）

常用于一列固定宽度，另一列宽度自适应的情况（主要技能：）

1.relative------父元素相对定位

2.absolute------自适应宽度元素绝对定位

注意：固定宽度列的高度 > 自适应宽度的列

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航