Расположите кнопку поверх другой, используя CSS

Question

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

Answer 1

Зачем ставить одно поверх другого? Существует «правильный» способ скрыть вещи в CSS, используя свойство display:

.register_button { display: none; }

Тогда в вашем HTML:

<button type="button" class="register_button">Will not show up!</button>

Answer 2

Да, есть.

.button1 {
  position: absolute;
  left: 100;
  top: 100;
  z-index: 1000;
}

.button2 {
  position: absolute;
  left: 100;
  top:100;
 z-index: 1001;
}

Но мне не нравится это делать. С одной стороны, он удаляет вас из естественного потока разметки и заставляет вас размещать кнопку независимо от того, какой контент находится над ней. С другой стороны, что если нижняя кнопка больше верхней? Тогда у вас есть проблема с краями нижнего видимого.

Используйте решение Доминика выше. Это намного лучше.

Answer 3

Сначала вам нужно проверить id элемента с помощью инструмента, подобного firebug (аддон firefox), затем вам нужно использовать этот идентификатор в css для его позиционирования, предположим, кнопка имеет идентификатор myid, вы должны сделать это в CSS:

#myid
{
  position:absolute;
  top:100px; /* adjust this */
  left:100px; /* adjust this */
}