HTML/CSS close button overlapping right/upper corner

Question

Looking to place a button overlying, and partially outside parent div such as in this picture. MY attempts have it within the parent DIV. The picture below is what I am after.

#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

I guess this is what you looking for:

Just add position:absolute; instead 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>