CSS-定位2-绝对定位

作者: Java小工匠 | 来源:发表于2017-06-09 22:37 被阅读0次

CSS-定位2-绝对定位
css-相对定位、绝对定位和固定定位例子
day06
定位层
css-定位
CSS-定位
CSS-定位
绝对定位与相对定位的比较
微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径
定位流-绝对定位

1、绝对定位概述

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
（1）从文档流中删除，原来占用的空间释放
（2）绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

2、效果演示

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-定位-绝对定位</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrap{
            width : 800px;
            background: gray;
            position : relative;
            margin : 0px auto;
        }
        .div1{
            border: 1px;
            background: blue;
            height: 100px;
        }
        .div2{
            width: 700px;
            background: red;
            height: 100px;
            position: absolute;
            top : 20px;
            left : 0px;
        }
        .div3{
            background: green;
            height: 100px;
        }
    </style>
</head>
<body>
    <div style="height: 100px"></div>
    <div class="wrap">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

运行效果：
因为wrap样式的div是相对布局，因此wrap是div2已定位的父元素。
因为绝对定位从文档流中删除，因此绿色div3向上移动。