尝试使用getBoundingClientRect（）获得正确的元素坐标

Question

我有一个id为“ container”的容器元素和一个id为“ menu”的子元素，子元素比包含子元素的容器div元素小，但是当我在两者上调用getBoundingClientRect（）函数时元素，然后打印出两个元素的底值，它们是完全相同的！谁能告诉我是什么原因造成的？谢谢

这里是我的代码：

<main id="container" class="flexBox">
    <app-back-to-top></app-back-to-top>
    <aside id="menu">
        <div class="mat-elevation-z1">
            <h2>Menu</h2>
          <p-menu [model]="items" [style]="{minWidth:'15em', background: 'white'}"></p-menu>
          </div>
      </aside>
      <section id="outlet">
        <router-outlet></router-outlet>
      </section>
</main>

在这里输入打字稿代码段：

  scrollFunction() {
    let containerDimensions = document.getElementById("container").getBoundingClientRect();
    let menuDimensions = document.getElementById("menu").getBoundingClientRect();
    console.log(containerDimensions.bottom + " " + menuDimensions.bottom);
    if ((containerDimensions.bottom < menuDimensions.bottom)) {
        document.getElementById("menu").style.position = "fixed";
        document.getElementById("outlet").style.marginLeft = "290px";    
    } else {
        document.getElementById("menu").style.display = "static";
        // document.getElementById("outlet").style.marginLeft = "50px";
    }
    if (containerDimensions.bottom < menuDimensions.bottom){
    console.log("true");
    }
    else         document.getElementById("menu").style.display = "static";
  }

css文件

/*----------------------------General CSS rules------------------------------*/

main{
    width: 1200px;  
    position: relative;  
}



#controlPanel{
    flex: 0 0 250px;
    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
    /* padding-bottom: 15px; */
}

/* section{
    min-height: 600px;
} */

/* section#menuDisplay{
    flex: 0 0 895px;
} */

/*----------------------------------Menu styling---------------------------------*/
/* ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #FFC90E;
    border: 1px solid #555;
} */

/* ::ng-deep p-menu {
    margin: 1000em 0 0 0 !important
} */

::ng-deep .ui-menuitem-icon {
    color: #22B14C;
    /* width: 50px !important; */
}

::ng-deep .ui-menu{
    /* padding:20px;
    padding-top:-100px;
    margin-top:0px;
    margin-bottom:50px;
    padding-bottom:50px;
    padding-right: -200px; */
    border: none;
}

section#outlet{
    margin-left: 50px;
}

.container{
    min-height: 9000px;
}

h2{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  text-align: center;
  background-color: #22B14C;
  color: white;
    padding-top: 5px;
    padding-bottom: 5px;
  }

containerDimensions和menuDimensions应该给出不同的底部坐标，但是它们都是相同的。这是加载html文件时的直观屏幕截图。

此处是html页面的直观表示。请看箭头。