Как сделать :hover рабочим при position relative?

Question

losso_lapolososso @losso_lapolososso

CSS

Как сделать :hover рабочим при position relative?

Здравствуйте, у меня перестал работать :hover на ссылке, после того как я задал блоку, в который вложена ссылка position: relative

<main class="main" id="main">
		<div class="container">
			<div class="mainWrap">
				<div class="mainTitle">
					<h1><span>Франшиза</span> цифрового агентства недвижимости по продаже Новостроек «Advise»</h1>
				</div>
				<div class="mainPar">
					<p>Подключитесь к франшизе «Advise» и получите доступ к непрерывному потоку <span>живых</span> и <span>проверенных Клиентов.</span></p>
				</div>
				<div class="button">
					<a href="">Получить презентацию</a>
					<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</main>

.main {
  background-image: -o-linear-gradient(325deg, white 55%, rgba(242, 72, 65, 0) 50%), url(../img/bg.jpg);
  background-image: linear-gradient(125deg, white 55%, rgba(242, 72, 65, 0) 50%), url(../img/bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-bottom: 15%;
  position: relative;
  z-index: -1; }
  .main:before {
    content: "";
    height: 100%;
    width: 30px;
    background: #EDF6FB;
    position: absolute;
    right: 0;
    left: 57%;
    -webkit-transform: skew(-35deg, 35deg);
        -ms-transform: skew(-35deg, 35deg);
            transform: skew(-35deg, 35deg); }
  .main:after {
    content: "";
    height: 109%;
    width: 40px;
    background: #EDF6FB;
    position: absolute;
    right: 0;
    left: 68.89%;
    bottom: -51.8%;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); }
  .main .mainWrap {
    width: 50%;
    z-index: 100; }
  .main .mainTitle {
    padding-top: 40%;
    padding-bottom: 20px; }
    .main .mainTitle h1 {
      font-weight: 500;
      font-size: 37px;
      line-height: 42px; }
    .main .mainTitle span {
      color: #CC235E; }
  .main .mainPar p {
    font-weight: normal;
    font-size: 20px;
    line-height: 24px;
    padding-bottom: 50px; }
  .main .mainPar span {
    font-weight: 500; }

.button {
  background: #CC235E;
  width: 288px;
  padding: 15px 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  position: relative;
    position-z-index: 999; }
  .button:hover {
    background: #9A1B47; }
  .button:hover .fa {
    -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
            transform: translateX(10px);
    -webkit-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s; }
  .button:not(:hover) .fa {
    -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
            transform: translateX(0px);
    -webkit-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s; }
  .button a {
    display: block;
    text-decoration: none;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    color: white;
    margin-right: 10px; }
  .button .fa {
    color: #fff;
    font-size: 21px; }