宅菌子丷 2017-10-26 15:22 采纳率: 100%
浏览 715

CSS问题:不知道出现这种情况是不是与定位有关

问题描述:为什么会出现两个按钮并排;而且如果将上面的按钮去掉下面也显示不出来。
(自学基础不扎实)

 <!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>
  • 写回答

4条回答 默认 最新

  • 罗忠浩 领域专家: 前端开发技术领域 2017-10-27 01:19
    关注

    首先ID不要一样， ID 是唯一的。然后，你的DIV1 2 3都是绝对定位，相当于两个INPUT中间实际上是没有文档流的元素存在，所以他们是挨着的。

    评论

报告相同问题？