问题描述:为什么会出现两个按钮并排;而且如果将上面的按钮去掉下面也显示不出来。
(自学基础不扎实)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offSetParent与offSetleft</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: #DC143C;
position: absolute;
}
#div2{
width: 100px;
height: 100px;
background:#A9A9A9;
position: absolute;
}
#div3{
width: 50px;
height: 50px;
background:#FF1493;
position: absolute;
left: 100px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点击我" />
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
<input type="button" id="btn" value="点击我" />
<script type="text/javascript">
var oDiv3 = document.getElementById('div3');
//console.log(oDiv3.offsetParent);
//console.log(oDiv3.offsetLeft);
</script>
</body>
</html>
首先ID不要一样， ID 是唯一的。然后，你的DIV1 2 3都是绝对定位，相当于两个INPUT中间实际上是没有文档流的元素存在，所以他们是挨着的。
首先，看了你的代码我给你提出一点点小建议，一般写CSS用到的都是**类**也就是class，在写JS的时候用到的是id，保持这样的习惯会使代码更加清晰可读性更高，另外id只能是独立的不能重复例如你的btn。
回到你的问题，因为你的div1 div2 div3 设置了**绝对定位**，他们**脱离了文档流**就相当于**悬浮**在页面上，你设置left、top、bottom、right值他们就会相对于**父容器**定位
浏览器解析代码是从上到下的：
1.解析到第一个btn1按钮它就会占用body的一段宽高，并且input是行内元素。
2.然后接下来解析div，它设置了绝对定位，脱离文档流，**不占用页面任何一个像素**！结果就是浮动在这body父容器的上层。
3接下来解析到btn2，前面提到input是行内元素，这时候这个btn2就会跑到上面和btn1**变成一行**。
现在如果**删除btn2**你不会看到btn1有变化，因为浏览器**先解析到btn1**它占用了一定的宽高所以他是存在的，**删除btn1留下btn2**你会看到两个btn**都不见**了，其实是btn2跑到了div1的**下面**，实际上它（btn2）依然占用body的宽高，只不过先解析到了div浮动了而已。
总的来说，还是浏览器**解析顺序**你要弄明白还有就是**行内和块级元素的关系**以及**绝对定位的参照物**。
简单的说一下，
1.两个按钮并排，是因为 <input type="button" id="btn" value="点击我" /> 按钮默认是行内元素，行内元素的宽不是100%的，你给多少就是多少，如果不给具体的宽度值，那就是默认的宽度，所以如果你想要让它们自动换行的话 必须加上display:block
2. <input type="button" id="btn" value="点击我" /> id不要取一样的，你可以取 <input type="button" id="btn1" value="点击我" /> <input type="button" id="btn2" value="点击我" />
3. 你给.div1设置了position: absolute,让它脱离了整个文档流，它就不会更多内容自动排列，而是浮在表面。把下面的元素盖住了，顺便说一下，网页其实3维的，它不是一个平面，它有层级关系
Have fun~
position: absolute 可以用z-index 赋值来处理