Статические социальные кнопки в нижнем колонтитуле, чтобы плавать в середине страницы CSS?

Question

Статические социальные кнопки в нижнем колонтитуле, чтобы плавать в середине страницы CSS?

Стандарт допускает такое поведение, хотя оно не гарантирует его. Из 3.7.2 / 2 [basic.stc.thread]:

Переменная с продолжительностью хранения потоков должна быть инициализирована до ее первого использования odr (3.2) и, если она построена, должна быть уничтожена на выходе потока.

Также возможно, что объекты создаются в какой-то другой момент (например, при запуске программы), так как «перед первым использованием» означает «в любой точке, если это раньше, чем «раньше».

2

html css css3

задан Andres 20 February 2019 в 00:56

6 ответов

Другие вопросы по тегам:

html css css3

Похожие вопросы:

score 0 · Answer 1

Вот, пожалуйста, добавьте это в класс .btn-toolbar.

.btn-toolbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; 
}

score 0 · Answer 2

Попробуйте это.

.shareaholic-canvas{
     position: fixed; // this holds the position at all times
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     z-index: 100;
}

score 0 · Answer 3

Это более полная демонстрация, включающая контейнеры с кнопками (ссылками), а также переходы при наведении на них и фирменные цвета.

body {
  min-height: 10000px;
  background-image: url(https://www.robertlandscapes.com/wp-content/uploads/2018/06/slider-BG-5-2.jpg?x48514);
  background-repeat: repeat;
}

.shareaholic-canvas {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  z-index: 10;
  overflow: hidden;
}

.shareaholic-canvas > a {
  display: inline-block;
  width: 52px;
  height: 42px;
  right: -10px;
  position: relative;
  transition: 0.3s transform;
}

.shareaholic-canvas > a:hover,
.shareaholic-canvas > a:focus {
  transform: translateX(-10px);
}

.youtube { background-color: #e02a20; }

.twitter { background-color: #4da7de; }

.facebook { background-color: #3e5b98; }

.instagram { background-color: #9c7c6e; }

<div class="shareaholic-canvas">
  <a class="youtube" href="#"></a>
  <a class="twitter" href="#"></a>
  <a class="facebook" href="#"></a>
  <a class="instagram" href="#"></a>
</div>

jsFiddle [ 113]

score 0 · Answer 4

добавить следующий стиль внутри класса .btn-toolbar

.btn-toolbar{
background-color: #00704afa;
    position: fixed;
    right: -145px;
    top: 25%;
    transform: rotate(90deg);
    transform-origin: left top 0;
}

. Ширина, высота и фон изменяются соответственно вам

.

score 0 · Answer 5

Мое лучшее предложение - использовать атрибут позиции. Как и в вашем примере, социальные кнопки зафиксированы в правой (средней) части сайта.

Попробуйте это:

body {
      position: relative;
}
.shareaholic-canvas {
      position: fixed;
      top: calc(50%);
      z-index: 100;
      right: 0;
}

score 0 · Answer 6

Еще один ответ, который мало чем отличается от других. Но с помощью этого фрагмента вы можете расположить свои элементы в точном центре окна с меньшим количеством кода.

.shareaholic-canvas {
    position: fixed;
    right: 0;
    top: calc(50% - 72.5px);
}