Размещайте div вправо, не влияя на дизайн
Я хочу разместить div справа вверху моей страницы. Он содержит квадратное изображение размером 50 пикселей, но в настоящее время влияет на макет верхних 50 пикселей на странице.
В настоящее время это:
<div style = "float: right;">
...
</div>
Я попробовал z-index, так как думал, что это будет ответ, но у меня не получилось.
Я знаю, что мне не хватает чего-то простого, но я просто не могу этого добиться.
Ответы 3
Попробуйте установить его position на абсолютное значение. Это исключает его из потока документа.
Что вы имеете в виду под ударами? Контент будет обтекать поплавок. Вот как они работают.
Если вы хотите, чтобы он отображался над вашим дизайном, попробуйте установить:
z-index: 10;
position: absolute;
right: 0;
top: 0;
Если вы не хотите, чтобы изображение вообще влияло на макет (и перемещалось поверх другого содержимого), вы можете применить к изображению следующий CSS:
position:absolute;
right:0;
top:0;
Если вы хотите, чтобы он располагался справа от определенного родительского раздела, вы можете добавить position: relative в этот раздел.
Если значение равно нулю, указывать единицу измерения не требуется. "право: 0;" работает точно так же, как "right: 0pt;" или "право: 0px;".
Ура - опасность оклейки от firebug!
@OlaTuvesson: «Не нужен» не означает, что мы не должны его использовать. Я стараюсь всегда ставить единицу измерения, поэтому, когда я увеличиваю число, мне не нужно помнить о добавлении единицы.
@Danosaure: Святая нить воскресения Бэтмена! :) Вы, конечно, правы, если это помогает отслеживать вещи и не причиняет вреда (кроме дополнительных ДВУХ полных байтов в размере файла), то в этом нет ничего плохого. Однако это все равно нарушит мое чувство равновесия во Вселенной. Я имею в виду, что ноль - это ноль, у него нет единицы измерения, цвета или запаха - это просто ... ничего.
Бонусный трюк, который я часто использую с position: absolute;, заключается в том, что элемент без значений для верхнего / левого / нижнего / правого положения будет расположен абсолютно в том же месте, что и для position: static; (по умолчанию). Это упрощает наложение элементов одинакового размера друг на друга. Еще один удобный трюк заключается в том, что вы можете заставить элемент заполнить родительский элемент неизвестного размера (например, <body>), установив top: 0; left: 0; bottom: 100%; right: 100%;. Отлично, когда вы хотите сохранить некоторое заполнение в эластичном контейнере!
@OlaTuvesson Zero - это тоже безграничные возможности. Ноль - это полная энергия Вселенной и создателя Вселенной (Энергия нулевой точки).
@DanBray Эммм ... Нет.
Да, поток - это то, что я имел в виду под "ударами". Понятно, спасибо. : o)