Javascript 如何将一个div与父div进行耦合和解耦？_Javascript_Html_Css

Javascript 如何将一个div与父div进行耦合和解耦？

javascript html css

Javascript 如何将一个div与父div进行耦合和解耦？,javascript,html,css,Javascript,Html,Css,我有一个父div-myCcontainer和一个子div-div2。当我移动父div时，子div应该占据相同的位置，父div应该移动到某个位置。如何使用JavaScript实现这一点 <!DOCTYPE html> <html> <head> <style type="text/css"> .cpdiv{

我有一个父div-myCcontainer和一个子div-div2。当我移动父div时，子div应该占据相同的位置，父div应该移动到某个位置。如何使用JavaScript实现这一点

            <!DOCTYPE html>
            <html>
            <head>
            <style type="text/css">


            .cpdiv{
                    background-color: yellow;
                    width:150px;
                    height:150px;
                        border: 2px solid black;
            }
            #myContainer {
              width: 500px;
              height: 500px;
              position: relative;
              border: 2px solid #222333;
            }
            #container {
                width: 100%;
                height:100%;
            }
            </style>
            </head>
            <body>
            <div id="container" >
                <div id="myContainer" >
                    <div >
                        <button id="btn3"  onclick="myMove()">Move</button>
                    </div>

                    <div class="cpdiv" id="div2">
                        <label>hai</label>
                    </div>
                </div>

            </div>

            <script>
            function myMove() {
              var elem = document.getElementById("myContainer");
              document.getElementById("div2").style.position = "fixed";
              var pos = 0;
              var id = setInterval(frame, 10);
              function frame() {
                if (pos == 150) {
                  clearInterval(id);
                } else {
                  pos++;
                  elem.style.top = pos + 'px';
                  elem.style.left = pos + 'px';

                }
              }
            }
            </script>   
            </body>
            </html>


.cpdiv{
背景颜色：黄色；
宽度：150px；
高度：150像素；
边框：2件纯黑；
}
#霉菌容器{
宽度：500px；
高度：500px；
位置：相对位置；
边框：2px实心#222333；
}
#容器{
宽度：100%；
身高：100%；
}
移动
海
函数myMove（）{
var elem=document.getElementById（“myContainer”）；
document.getElementById（“div2”）.style.position=“fixed”；
var-pos=0；
var id=设置间隔（第10帧）；
函数框架（）{
如果（位置=150）{
清除间隔（id）；
}否则{
pos++；
elem.style.top=pos+'px'；
elem.style.left=pos+'px'；
}
}
}

稍微更改了您的css：

            .cpdiv{
                background-color: yellow;
                width:150px;
                height:150px;
                border: 2px solid black;
                top: 20px;
                left:20px;
        }

请向我们展示您迄今为止尝试过的代码？