Class is not being right using relative property - html

Question

I have declared a class and positioned it absolute and when I declare another class and position another as relative and it's not working.
Here is 1st class:
<p class="slidshow">
<img class="mySlides" src="1.jpg" width="1000px" height="500px">
<img class="mySlides" src="2.jpg" width="1000px" height="500px">
<img class="mySlides" src="3.jpg" width="1000px" height="500px">
<img class="mySlides" src="4.jpg" width="1000px" height="500px">
<script type="text/javascript">
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 2 seconds
}
Here it's css:
.slidshow{
position: absolute;
top: 130px;
right: 150px;
}
Here is second class:(it's just a sample)
<div class="cont">
<a id="contact">PHONE</a>
</div>
Here is it's css:
.cont{
position: relative;
top: 10px;
right: 10px;
}
The second class appears left to to first class.

Answer 1

I think you should read it first so you can better understand the css positions.
It's not about the exact solution it's about getting the basics that will lead you to build better layouts in future so please go through this article:
https://medium.freecodecamp.org/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26