Social Buttons stuck to middle - html

Question

So basically i want my Social Bar to be on the Right side of the Screen yet i just can't figure out why it wont move :(
Tried to mess with the Icon Bar and shiz but im still learning so i don't really know what to do
HTML
.icon-bar {
position: fixed;
top: -100%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
.icon-bar a {
display: block;
position: static;
text-align: left;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: rgb(196, 44, 44);
}
.twitter {
background: #55ACEE;
color: white;
}
.instagram {
background: #125688;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
CSS
<!-- Social Buttons -->
<div class="icon-bar">
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>

Answer 1

Change this code of css:
.icon-bar {
position: absolute;
right: 0;
}

Answer 2

.icon-bar {
position: fixed;
top: -100%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
The top value of -100% in icon-bar selector is causing issue in your code. By setting the value of -100% the bar is being pushed up in the viewport, to a point where it becomes invisible.

Answer 3

To move it to right, when you use position:fixed you should use right:0.
(In the below code I use the name of social media)
To layout your a tags, it's better to use display:flex, flex layout is the best way to layout your items on the page.
.icon-bar {
position: fixed;
/* top: -100%; */
right:0;
/*-webkit-transform: translateY(50%); //I comment this code to show element on result box.
-ms-transform: translateY(50%);
transform: translateY(50%);*/
}
.icon-bar a {
/* display: block;
position: static; */
display:flex;
text-align: left;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: rgb(196, 44, 44);
}
.twitter {
background: #55ACEE;
color: white;
}
.instagram {
background: #125688;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
<div class="icon-bar">
twitter
instagram
linkedin
<div>
To learn more about position these links will help you:
css-tricks.com
developer.mozilla.org
About flex layout, you can read:
css-tricks.com
developer.mozilla.org