Плаваю div правильно, не влияя на дизайн

Question

Я хочу добавить div справа вверху моей страницы. Он содержит квадратное изображение размером 50px, но в настоящее время он влияет на макет верхнего 50px на странице.

В настоящее время его:

<div style="float: right;">
  ...
</div>

Я попробовал z-index, так как думал, что это будет ответом, но я не смог его запустить.

Я знаю, что это что-то простое, что мне не хватает, но я просто не могу это прибить.

Answer 1

Что вы подразумеваете под ударами? Содержание будет течь вокруг поплавка. Вот как они работают.

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

z-index: 10;  
position: absolute;  
right: 0;  
top: 0;

Answer 2

Если вы не хотите, чтобы изображение вообще влияло на макет (и плавало поверх другого содержимого), вы можете применить к изображению следующий CSS:

position:absolute;
right:0;
top:0;

Если вы хотите, чтобы он плавал справа от определенного родительского раздела, вы можете добавить position: relative к этому разделу.

Answer 3

Попробуйте установить его position в абсолютное значение. Это выводит его из потока документов.