why would my element disappear after I change the position to relative?-CodePudding

I just started learning HTML/CSS. I found position is hard to me to understand. So I changed the position to relative in .button span, .button .icon selector the the arrow will disappeared, but If I delete the Download download it would be back again. Could anyone tell me why this happened? Also isn't block element(div) and inline element(span) are not supposed in one line so I was wondering in which part of css force them to be one line? Thank you.

/* Main Styles */

body {
  min-width: 300px;
  background-color: #ecf0f1;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

.button {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  overflow: hidden;
  margin: auto;
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  width: 300px;
  height: 100px;
  line-height: 100px;
  background-color: #34B3A0;
  color: #fff;
}

.button span,
.button .icon {
  position: absolute;
  display: block;
  height: 100%;
  text-align: center;
}

.button span {
  width: 72%;
  left: 0px;
  line-height: inherit;
  font-size: 22px;
}

.button .icon {
  right: 0;
  width: 28%;
}

.button .icon .fa {
  font-size: 30px;
  vertical-align: middle;
}

.button span,
.button div,
.button i {
  transition: width 750ms ease-in 200ms, left 500ms ease-out 450ms, font-size 950ms linear;
}

.icon {
  width: 200px;
  background-color: #1A7B72;
}

.button:hover span {
  left: -72%;
}

.button:hover .icon {
  width: 100%;
}

.button:hover .icon .fa {
  font-size: 45px;
}

<a  style="color: white;" href="#" role="button">
  <span>DOWNLOAD</span>
  <div >
    <i ></i>
  </div>
</a>

<link rel="stylesteet" href="https://fonts.googleapis.com/css?family=Open Sans">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

CodePudding user response：

because absolute positioned elements are removed from the normal flow and can overlap elements. and if you want to use position absolute, then you must position the element in its parent where you want it to be. and parent position will be relative.

please read and watch to learn and practice about position properties and how to use them.

you can start here

there are many youtube channels that will explain all of that to you in less than 10 minutes. one of my favorites is this channel. check it out.

CodePudding user response：

sorry for bad grammars. I rephrase my question. I just started learning HTML/CSS. I found position is hard to me to understand. So I changed the position to relative in .button span, .button .icon selector the the arrow will disappeared, but If I delete the Download download it would be back agin. Could anyone tell me why this happened? Also isn't block element(div) and inline element(span) are not supposed in one line so I was wondering in which part of css force them to be one line?Thank you. I added pictures for better understanding my questions.
enter image description here