Один и тот же div в разных позициях? (CSS)

Question

Возможно ли иметь CSS div с разными позициями? Например, у меня есть стиль div, который я часто использую, и кажется чрезмерным создавать новый идентификатор каждый раз, когда я хочу другую позицию Можно ли указать в HTML позицию div?

Спасибо.

Answer 1

Вы можете передать несколько классов в DIV. Создайте один класс, который имеет все ваши свойства по умолчанию. Затем создайте несколько дополнительных классов, которые размещают DIV там, где вы хотите.

.defaults
{
   properties...
}
.position1
{
   top: 0;
   left: 100px;
}
.position2
{
  top 100px;
  left: 0;
}

<div class="defaults position1"></div>
<div class="defaults position2"></div>

Answer 2

Вы не можете иметь более одного элемента с одинаковым идентификатором.Вместо определения позиции по ID используйте класс для общих свойств и ID только для тех свойств, которые относятся к конкретным элементам:

.positionDiv {
    width: 400px;
    height: 200px;
 }
 #div1 {
    left: 20px;
 }
 #dev2 {
    left: 40px;
 }

 <div class='positionDiv' id='div1'>first div</div>
 <div class='positionDiv' id='div2'>second div</div>

Answer 3

Если я правильно понимаю вашу проблему, вы можете использовать класс вместо идентификатора:

<div class="something">...</div>

.something { whatever: whatever }

Answer 4

Старайтесь не использовать встроенный стиль, если это возможно. Вы хотите отделить html от стиля для удобства чтения и поддержки

Вместо этого добавьте дополнительные классы в div.

HTML

<div class="styled">
</div>
<div class="styled otherclass">
</div>

CSS

.styled { background: red; border: 1px solid blue; }
.otherclass { background: green }

Вторая строка перекрывает только фон. Таким образом, граница наследуется от класса стилей

Answer 5

Я не уверен, что правильно понимаю ваш вопрос, но вы можете назначить несколько классов элементам, и вы можете указать css inline.Комбинируя эти приемы, вы можете очень удобно менять положение.

Answer 6

Вы можете указать встроенный стиль в коде:

<div style="left:10px;top:20px;">

Хотя я обычно стараюсь избегать этого.Код легче поддерживать, если все стили в одном месте.