如何将子div定位在父div右上角？子div跑出父元素外如何解决

问题原因 #

• 你为子元素设置了position: absolute，绝对定位元素的定位基准是最近的设置了非static值position属性的父级元素
• 你的父元素.content没有显式设置position属性，默认值为static，不满足作为绝对定位基准的条件，因此子元素会向上追溯到根元素作为定位基准，最终相对于浏览器视口的右上角定位，脱离了父元素范围。

解决方法 #

给父元素.content添加position: relative属性即可，修改后的CSS代码如下：

.content {
  align-items: center;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 200px;
  min-height: 140px;
  min-width: 140px;
  border: 1px solid;
  position: relative; /* 新增这一行即可 */
}

.topcorner {
  width: 42px;
  height: 42px;
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

内容的提问来源于stack exchange，提问作者react1