Как сверстать такой элемент?

Question

[aliasst]

Подскажите как сверстать такой блок? Имеется ввиду как сделать небольшую круглую аватарку вверху поверх основного блока, так чтобы она была адаптивной

Answer 1

[Максим Тимофеев]

img {border-radius:50%; height:100px; width:100px; margin-top:-50px;}

Comments

[aliasst]

спасибо, а как ее спозиционировать правильно? в псевдоэлементе before? или как?

[Максим Тимофеев]

aliasst: margin-left: calc(100% - 50px);

[Максим Тимофеев]

aliasst: либо засунуть в див шириной с родителя и сделать text-align: center;

Answer 2

[justdealman]

img {
	position:absolute;
	left:50%;
	top:-50px;
	height:100px;
	width:100px;
	margin-left:-50px;
	border-radius:50%;
}

Comments

[Максим Тимофеев]

железное правило верстки: старайтесь не использовать абсолютное позиционирование, где можно обойтись без него.

[aliasst]

Максим Тимофеев: а почему? я не знал такое правило) спасибо буду знать

[justdealman]

Максим Тимофеев а у меня нет таких железных правил, по ситуации смотрю)

[Максим Тимофеев]

justdealman: опыт многих верстальщиков. Абсолют часто удобен, но потом крайне сложно править и совмещать с другими частями. Это как бы не стандарт конечно, это скорее правило хорошего тона.