您的位置：首页 > 其它

慕课网学习笔记----《网页布局基础》—绝对定位布局

2017-03-27 13:53 253 查看

绝对定位布局

通过设置position属性实现，能够实现横向多列布局及较为复杂的定位

拥有3种定位形式：

静态定位

相对定位

绝对定位

可设置4个属性值：

static 静态定位

relative 相对定位

absolute 绝对定位

fixed 固定定位

absolute和fixed都属于绝对定位形式

静态定位是元素没有设置position定位的默认状态，元素还处于标准文档流中

相对定位

特点：

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

相对定位的元素仍处于标准文档流中，会占据标准文档流的空间

（元素仍然保持其未定位前的形状，它原本所占的空间仍保留）

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

（元素仍然保持其未定位前的形状，移动元素会导致它覆盖其他框）

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>绝对定位布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.div1{
background-color: red;
height:130px;
}
.div2{
background-color: blue;
height:150px;
position:relative;
top:50px;
left:20px;
}
.div3{
background-color: green;
height:130px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

效果如下图：

蓝块被设置相对定位后，相对自身原有位置进行偏移，原本所占的空间仍保留，并且浏览器会出现滑块。

绝对定位

特点：

相对于其包含块进行偏移

（包含块可能是文档中的另一个元素或者是初始包含块）

脱离标准文档流，不占据空间

（原先在标准文档流中所占的空间会关闭，好像该元素原来不存在）

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

（不论原来它在正常流中生成何种类型的框，元素定位后生成一个块级框）

相对定位和绝对定位在标准文档流上的区别：

相对定位元素仍处于标准文档流中，占据空间

绝对定位元素脱离标准文档流，不占据空间

未设置绝对定位时：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>图片自适应</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.div1{
position:relative;
background: red;
height:300px;
margin:100px;
}
.div2{
background: blue;
height:300px;
}
</style>
</head>
<body>

<div class="div1">
<div class="div2"></div>
</div>

</body>
</html>

效果如下图：

元素设置了绝对定位，未设置偏移量时：

.div2{
background: blue;
height:300px;
width:100%;  /*新增*/
position:absolute;  /*新增*/
}

效果如下图：

此时蓝块的初始位置不变，宽度继承自根节点

<html>

，浏览器下方出现滑块。

绝对定位元素未设置偏移量的特点：

无论是否存在已定位的祖先元素，都保持在元素初始位置

宽度随着内容的变化而变化（类似于浮动时块的宽度），故记得设置width，否则当没有填充内容时，宽度为0。

1）.若未填充内容，未设置宽度：看不见元素，width为0。与是否存在有已定位的包含元素无关

2）.若填充内容，未设置宽度：width随内容而定。与是否存在有已定位的包含元素无关

3）. 设置宽度，无论是否填充内容，

若有已定位的包含元素：宽度为设置的固定值，或设置的百分数*包含的定位元素的宽度

若无已定位的包含元素（包含元素未定位或定位元素不是包含的祖先元素）：宽度为设置的固定值，或设置的百分数*html的宽度

元素设置偏移量时：

.div2{
background: blue;
height:300px;
width:100%;
position:absolute;
top:100px;  /*新增*/
left:50px;   /*新增*/
}

1.此时红块为设置了相对定位，且红块包含蓝块，所以蓝块设置绝对定位，相对于红块进行移动，效果如下：

2.若此时将红块不再设为relative相对定位，或是让红块不再包含蓝块，将蓝块设置为绝对定位，是相对于祖先元素

<html>

进行定位，效果如下：

绝对定位元素设置了偏移量时的特点：

不存在已定位的祖先元素：以根节点

<html>

为偏移参照基准

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

相对定位和绝对定位在偏移上的区别：

相对定位：“相对于”元素在文档中的初始位置。

绝对定位：“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

使用绝对定位实现横向两列布局：

常用于一列固定宽度，另一列宽度自适应的情况

主要应用技能：

对父元素使用相对定位–relative

对需要自适应宽度的元素使用绝对定位–absolute

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

（原因：自适应宽度的div设置了absolute后，脱离标准文档流，无法将父元素的高度撑开）

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

标签：

相关文章推荐

新的分享

章节导航