Кнопки друг на друге не соседствуют?

Question

Кнопки друг на друге не соседствуют?

0

У меня есть две кнопки, что я надеялся иметь бок о бок, однако их право сверху каждого, что я не могу понять, почему.. вот то, что я смотрю.

здесь мой код.

CSS:

  button {
  position: absolute;  
  top: 250px;
   left: -15px; 
   z-index: 9999;
  color:white;
  display: block;
  margin: 30px;
  padding: 7px 35px;
  font: 300 150% langdon;
  background: transparent;
  border: 3px solid white;
  cursor: pointer;
  } 

  button:hover {
  background: black;
  border: 1px solid black;
  }

  button:active {
  background: #2e2e2e;
  border: 1px solid black;
  color: white;
  }

Есть идеи?

user3430532 18 апр. 2014, в 21:17

Источник

0

Мне тоже нужно увидеть ваш HTML, но я подозреваю, что проблемы, например, с position: absolute;
j08691 18 апр. 2014, в 19:15
0

Назначьте разные идентификаторы для кнопок и используйте разные стили для обоих с разными абсолютными позициями ...
skrtbhtngr 18 апр. 2014, в 19:16
1

position: absolute удаляет элементы из нормального потока документа. Это означает, что первый не будет толкать второго рядом с ним.
Oriol 18 апр. 2014, в 19:16
0

мои кнопки: <button class = "button"> Зарегистрироваться </ button> <button class = "button"> ВХОД </ button>
user3430532 18 апр. 2014, в 19:46

Показать ещё 2 комментария

Теги:

html

css

3 ответа

Ещё вопросы

Мне тоже нужно увидеть ваш HTML, но я подозреваю, что проблемы, например, с position: absolute;
Назначьте разные идентификаторы для кнопок и используйте разные стили для обоих с разными абсолютными позициями ...
position: absolute удаляет элементы из нормального потока документа. Это означает, что первый не будет толкать второго рядом с ним.
мои кнопки: <button class = "button"> Зарегистрироваться </ button> <button class = "button"> ВХОД </ button>

Derek S · Answer 1 · 2014-04-18T18-13-00.000Z

position:absolute удаляет элементы из обычного потока документов. Таким образом, они будут расположены друг над другом, где указано (top: 250px; left: -15px;), поскольку они имеют одинаковые стили позиции.

Для вашего сценария, вероятно, было бы лучше использовать поплавки и поля:

button {
    float:left;
    margin-top:250px;
}

это сработало, но теперь кнопки находятся под прозрачностью?
Я предполагаю, что прозрачность также позиционируется абсолютно. Попробуйте удалить позиционирование на этом (добавив float если необходимо). Как отмечается в другом комментарии, когда полностью не понято абсолютное позиционирование, это может создать трудности для обновления сайтов и, как правило, не лучший способ действий.

Collin Grady · Answer 2 · 2014-04-18T17-23-00.000Z

В общем, position: absolute; необходимо избегать; вы берете элемент из стандартного потока (что означает, что больше не бок о бок или сверху вниз).

Если вы настаиваете на его использовании, вам нужно два разных правила позиционирования для ваших кнопок, чтобы вы могли назначить их в разных местах.

Следует избегать, если не поняли. Как только вы понимаете позиционирование CSS, это мощный инструмент.
Да, и если вы достигнете точки, когда вам это нужно, тогда хорошо, но слишком часто разработчики сразу же обращаются к абсолютному позиционированию, которое создает шаткие, трудно обновляемые сайты :)

Bharat Geleda · Answer 3 · 2014-04-18T17-13-00.000Z

Попытка position:static; Я читал, что он отображает элементы по порядку, как они появляются в потоке документа.