代码描述：position:relative 相对定位 不脱离文档。position:relative相对定位不脱离文档流
position:relative相对定位不脱离文档流
2019-02-26 03:40:14本文将会通过代码实例证实一下相对定位是否会脱离文档流。 如果一个元素脱离文档流，那么它不再占据文档流的空间，后面的元素会填补此空间。 下面通过代码实例做一下证实：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>position:relative相对定位不脱离文档流 </title>
<style type="text/css">
#top {
width:100px;
height:100px;
background:#ccc;
position:relative;
left:130px;
}
#bottom {
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
</body>
</html>
可以看到，相对定位的原来位置依然被保存，后面的元素并不能够填充。
463 617
用户评论
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 |
注册
相关标签代码
-
checked属性值是true还是checked
html对象代码实例 浏览 (3104) -
JavaScript 获取第n个li元素
获取第n个li元素实例 浏览 (3628) -
IE9以下浏览器的innerHTML忽略空格怎么办
innerHTML实例 浏览 (694) -
javascript检查并闭合没有闭合html元素
闭合html元素实例 浏览 (1276) -
animation与transition区别
animation代码 浏览 (1225) -
offsetwidth与style.width区别
offsetwidth代码 浏览 (1308)
