Могу ли я совместить положение: относительное и плавающее: слева?

Question

Могу ли я применить position: relative и float: left к одному элементу? Как это:

div {
  float: left;
  position: relative;
  top: 0px;
  left: 0px;
}

Answer 1

Да.

CSS2.1, 9.4.3 :

"После того, как коробка была разложена в соответствии с нормальным потоком или всплыла , это может быть смещено относительно этой позиции. Это называется относительным позиционированием "

Answer 2

Могу ли я применить относительное положение и плавать влево на один элемент?

Да. Попробуйте.

Answer 3

Я хочу дать другой ответ, если он кому-то может помочь. У меня было два соседних div, которые я хотел, чтобы они занимали место:

<div class="col-md-12">
    <div class="col-md-6">stuff</div>
    <div class="col-md-6">other stuff</div>
</div>

Раньше я делал это, применяя <div class="clear"></div> после всех моих плавающих. Раньше это работало, потому что .clear { clear: both; } решит проблему. Это больше не работает для меня. Вместо этого я следовал этим инструкциям и добавил этот класс в свой контейнер:

.noFloat {
    width: 100%;
    overflow: auto; //If you get a scroll bar, try overflow: hidden;
    float: none;
}

так что я закончил с:

<div class="col-md-12 noFloat">...</div>

Вот ссылка на пример bootply.com: http://www.bootply.com/EupCHRhV4s

Answer 4

Ответы, которые утверждают, что вы можете комбинировать float и position, на самом деле неверны. Да, позиция плавающего div действительно будет двигаться, но окружающий текст не будет течь так, как вы ожидаете. Проблема в том, что атрибуты position фактически оставляют белое поле, где раньше находился плавающий элемент div, а затем перемещают div в другое место, оставляя поле позади. Другими словами, вы будете располагать свой div поверх текста, когда вы, вероятно, захотите, чтобы текст обтекал div в его новом положении.

Вот пример div, который имеет простой float: right

Вот пример того же самого div, но с положением: относительный; и верх: 0,75 дюйма; добавлено:

Обратите внимание, что поле теперь находится над текстом. Это, вероятно, не то, что вы хотите!

Answer 5

Да, вы можете использовать оба.

Вы будете использовать float:left, чтобы расположить элемент слева и разрешить следующему элементу располагаться справа от него.

position:relative повлияет на себя и своих детей, занять собственную позицию. когда вы будете использовать left:npx;top:npx, он будет перемещать этот элемент влево, вправо, вверх и вниз.

Вы можете проверить это демо: jsfiddle link