Так что в основном я хочу, чтобы моя социальная панель была в правой части экрана, но я просто не могу понять, почему она не будет двигаться :(

Пытался возиться с панелью значков и шизом, но я все еще учусь, поэтому я действительно не знаю, что делать.

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">
      <a href="https://twitter.com/" target="_blank" class="twitter"><i class="fa fa-twitter"></i></a>
      <a href="https://www.instagram.com//" target="_blank" class="instagram"><i class="fa fa-instagram"></i></a>
      <a href="https://www.linkedin.com/in//" target="_blank" class="linkedin"><i class="fa fa-linkedin"></i></a>
0
Lurinoxi 4 Фев 2022 в 11:28

3 ответа

Лучший ответ

Измените этот код css:

.icon-bar {
 position: absolute;
  right: 0;
}
0
Anamika Sharma 4 Фев 2022 в 11:55
Спасибо за ответ, теперь работает! большое спасибо !
 – 
Lurinoxi
4 Фев 2022 в 11:59
.icon-bar {
  position: fixed;
  top: -100%;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

Верхнее значение -100% в селекторе панели значков вызывает проблему в вашем коде. При установке значения -100% полоса выдвигается в окне просмотра до такой степени, что становится невидимой.

0
Biswaranjan Parida 4 Фев 2022 в 11:44

Чтобы переместить его вправо, когда вы используете position:fixed, вы должны использовать right:0.

(В приведенном ниже коде я использую название социальных сетей)

Для макета ваших тегов a лучше использовать display:flex, гибкий макет — лучший способ макета ваших элементов на странице.

.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">
      <a href="https://twitter.com/" target="_blank" class="twitter">twitter</a>
      <a href="https://www.instagram.com//" target="_blank" class="instagram">instagram</a>
      <a href="https://www.linkedin.com/in//" target="_blank" class="linkedin">linkedin</a>
  <div>

Чтобы узнать больше о position, вам помогут эти ссылки:

css-tricks.com

developer.mozilla.org

О flex layout вы можете прочитать:

css-tricks.com

developer.mozilla.org

0
Zahra Mirzaei 4 Фев 2022 в 12:02
Привет! Спасибо за ответ, теперь он работает, но все еще не очень правильно, я могу просто изменить его, поставив правильно: 50; или что-то?
 – 
Lurinoxi
4 Фев 2022 в 11:57
Вы хотите выровнять значки (текст) по правому краю?
 – 
Zahra Mirzaei
4 Фев 2022 в 12:04