右/上角重叠的HTML / CSS关闭按钮

Question

想要放置一个覆盖的按钮，并且部分位于父div之外，例如在此图片中。我的尝试在父DIV中有它。下图是我的目标。

#container {
  width: 80%;
  border-radius: 25px;
  border: 2px solid Black;
  padding: 15px 15px 15px 15px;
  margin: 20px 20px 20px 20px;
  background: #A4D3EE;
  overflow: auto;
  box-shadow: 5px 5px 2px #888888;
  position: relative;
}

#x {
    position: relative;
    float: right;
    background: red;
	color: white;
    top: -10px;
    right: -10px;
}

<div id="container">
        <button id = "x">
            X
        </button>
    Text Text Text
    Text Text Text
    Text Text Text
</div>

Answer 1

我想这就是你要找的东西：

只需添加position:absolute;而不是relative

#container {
  width: 80%;
  /*border-radius: 25px;*/
  border: 2px solid Black;
  padding: 15px 15px 15px 15px;
  margin: 20px 20px 20px 20px;
  background: #A4D3EE;
  overflow: visible;
  box-shadow: 5px 5px 2px #888888;
  position: relative;
}

#x {
    position: absolute;
    background: red;
    color: white;
    top: -10px;
    right: -10px;
}

<div id="container">
        <button id = "x">
            X
        </button>
    Text Text Text
    Text Text Text
    Text Text Text
</div>