《网页布局基础篇》—绝对定位布局

zoukankan html css js c++ java

《网页布局基础篇》—绝对定位布局
绝对定位布局

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

拥有3种定位形式：
静态定位

相对定位

绝对定位
可设置4个属性值：
static 静态定位

relative 相对定位

absolute 绝对定位

fixed 固定定位
- absolute和fixed都属于绝对定位形式
- 静态定位是元素没有设置position定位的默认状态，元素还处于标准文档流中
相对定位

特点：
1. 相对于自身原有位置进行偏移
2. 相对定位的元素仍处于标准文档流中，会占据标准文档流的空间
  （元素仍然保持其未定位前的形状，它原本所占的空间仍保留）
3. 随即拥有偏移属性和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>
```
效果如下图：

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

绝对定位

特点：
1. 相对于其包含块进行偏移
  （包含块可能是文档中的另一个元素或者是初始包含块）
2. 脱离标准文档流，不占据空间
  （原先在标准文档流中所占的空间会关闭，好像该元素原来不存在）
3. 随即拥有偏移属性和z-index属性
  （不论原来它在正常流中生成何种类型的框，元素定位后生成一个块级框）
相对定位和绝对定位在标准文档流上的区别：
1. 相对定位元素仍处于标准文档流中，占据空间
2. 绝对定位元素脱离标准文档流，不占据空间
未设置绝对定位时：
```
<!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;
        100%;  /*新增*/
        position:absolute;  /*新增*/
    }
```
效果如下图：

此时蓝块的初始位置不变，宽度继承自根节点<html>，浏览器下方出现滑块。

绝对定位元素未设置偏移量的特点：
1. 无论是否存在已定位的祖先元素，都保持在元素初始位置
2. 宽度随着内容的变化而变化（类似于浮动时块的宽度），故记得设置width，否则当没有填充内容时，宽度为0。
  1）.若未填充内容，未设置宽度：看不见元素，width为0。与是否存在有已定位的包含元素无关
  2）.若填充内容，未设置宽度：width随内容而定。与是否存在有已定位的包含元素无关
  3）. 设置宽度，无论是否填充内容，
  
  若有已定位的包含元素：宽度为设置的固定值，或设置的百分数*包含的定位元素的宽度
  
  若无已定位的包含元素（包含元素未定位或定位元素不是包含的祖先元素）：宽度为设置的固定值，或设置的百分数*html的宽度
元素设置偏移量时：
```
.div2{
        background: blue;
        height:300px;
        100%;
        position:absolute;
        top:100px;  /*新增*/
        left:50px;   /*新增*/
    }
```
1.此时红块为设置了相对定位，且红块包含蓝块，所以蓝块设置绝对定位，相对于红块进行移动，效果如下：

2.若此时将红块不再设为relative相对定位，或是让红块不再包含蓝块，将蓝块设置为绝对定位，是相对于祖先元素<html>进行定位，效果如下：

绝对定位元素设置了偏移量时的特点：
1. 不存在已定位的祖先元素：以根节点<html>为偏移参照基准
2. 存在已定位的祖先元素：以距其最近的已定位祖先元素为偏移参照基准
相对定位和绝对定位在偏移上的区别：
- 相对定位：“相对于”元素在文档中的初始位置。
- 绝对定位：“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
使用绝对定位实现横向两列布局：

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

主要应用技能：
1. 对父元素使用相对定位–relative
2. 对需要自适应宽度的元素使用绝对定位–absolute
注意：固定宽度的height > 自适应宽度的height
（原因：自适应宽度的div设置了absolute后，脱离标准文档流，无法将父元素的高度撑开）
查看全文

相关阅读:
【Redis】跳跃表原理分析与基本代码实现(java)
小鹤音形指引
 Maven
算法思维(长期更)
多路平衡树之红黑树
 多路平衡树之B树
 多路平衡树之2-3查找树
 栈与队列
 树基本概念
 Vue学习

原文地址：https://www.cnblogs.com/tomingto/p/14062588.html

《网页布局基础篇》—绝对定位布局

绝对定位布局

相对定位

绝对定位

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