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

StackOverflow https://stackoverflow.com/questions/308499

  •  08-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

Это было полезно?

Решение

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

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

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

Другие советы

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top