position：absolute 脱离文档流的真实含义_position: absolute 为什么没脱离文档流-优快云博客

本文链接：https://blog.youkuaiyun.com/MR_HONDA/article/details/52808822

position:absolute 是脱离正常的文档流（的显示方法），而不是真正的脱离了文档流

疑问？

在慕课网jQuery可见性分析的课程中，有人不理解，我解释了下：

如果元素不在文档流，肯定是不可见的；
如果在文档流，就能够被jq识别，但这样都是肉眼不可见而已（上述六种方法）；
六种方法中，其中设置透明度属性为0，visibility属性为hidden，仍然占据文档空间，只不过让我们看不到了而已，所以在jq中认为是被筛选成：visible；那么其他4种方法，则在文档中不占据空间，被jq认为应该筛选为：hidden

然而，有人留言的问题中，有这样一条：

position=absolute 是不可见的?

然后我就懵逼了一会，我猜他认为这样脱离文档里你，符合第一个条件:

如果元素不在文档流，肯定是不可见的

实验

然后我实验了一下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>可见性筛选选择器</h2>
    <h3>:visible/:hidden</h3>
    <div class="left">
        <div class="div">
            <a>display</a>
            <p id="div1" style="display:none;">display</p>
        </div>
        <div class="div">
            <a>width</a>
            <a>height</a>
            <p id="div2" style="width:0;height:0">width/height</p>
        </div>
        <div class="div">
            <a>visibility</a>
            <a>opacity</a>
            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
        </div>
         <div class="div">
            <a>position:absolute</a>
            <p id="div4" style="display:block;position:absolute;left:5px;top:5px">display</p>
        </div>
    </div>

    <p id="show"></p>
    <script type="text/javascript">
        function show (ele) {
            if (ele instanceof jQuery) {
                $("#show").html('元素的长度的 = ' + ele.length)
            } else {
                alert(ele+' 不是jQuery对象')
            }
        }
    </script>


    <script type="text/javascript">
        //查找id = div1的DOM元素,是否可见
        //show($("#div1:visible"));
    </script>

    <script type="text/javascript">
        //查找id = div2的DOM元素,是否可见
        //show($("#div2:visible"));
    </script>

    <script type="text/javascript">
        //查找id = div3的DOM元素,是否可见
        //show($("#div3:visible"));
    </script>

    <script type="text/javascript">
        //查找id = div4的DOM元素,是否可见
        show($("#div4:visible"));             //注意的地方
    </script>
    <script type="text/javascript">
        //查找id = div1的DOM元素,是否隐藏
        //show($("#div1:hidden"));
    </script>

    <script type="text/javascript">
        //查找id = div2的DOM元素,是否隐藏
        //show($("#div2:hidden"));
    </script>

    <script type="text/javascript">
        //查找id = div3的DOM元素,是否隐藏
        //show($("#div3:hidden"));
    </script>

</body>

</html>

结果是这样的：

元素的长度的 = 1

也就是说，对于jQuery，position:absolute是可见的。

分析

这样不就与以前学的，position:absolute脱离文档流不一致么

各处查阅，才知道，之前理解有问题，position:absolute 是脱离正常的文档流（的显示方法），而不是真正的脱离了文档流。

那到底什么是不在文档中呢？

指的是通过js/jq代码动态创建的元素，还没有执行插入操作插入到文档的这部分元素

 var checkbox = $("<input type=\"checkbox\" />");
    //如果不执行下面的appendTo操作的话，checkbox应该就是不在文档中的元素吧
checkbox.appendTo($("body"));

结论：

position:absolute 是脱离正常的文档流（的显示方法），而不是真正的脱离了文档流