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 是脱离正常的文档流(的显示方法),而不是真正的脱离了文档流