Как поместить на изображение блок css?

Question

[Антон Волков]

<div id="e5MyBooklet">
<div id="e5MainText">Галерея моих работ</div>
<div id="e5MyBookletPage">
		<div id="e5ingCont1">
			<div id="e5leftArrow"><</div>
			<img src="img/буклетыброшюры/брошюра3/1.jpg" alt="" id="e5img" class="e5imgClass1">
		</div>
		<div id="e5ingCont2">
			<div id="e5rightArrow">></div>
			<img src="img/буклетыброшюры/брошюра3/2.jpg" alt="" id="e5img" class="e5imgClass2">
	        </div>
</div>
</div>
<style>
#e5MyBooklet{
		width: 1052px;
		margin: auto;
		user-select: none;
	}
	#e5MainText{
		margin: auto;
		font-size: 70px;
		margin-left: 20px;
		user-select: text;
	}
	#e5MyBookletPage{
		text-align: center;
	}
	#e5leftArrow{
		float: left;
		1transform: translateX(96px);
	}
	#e5rightArrow{
		float: right;
		1transform: translateX(-96px);
	}
	#e5leftArrow,#e5rightArrow{
		z-index: 4;
		position: relative;
		font-size: 120px;
		background: #0000008a;
		text-align: center;
		line-height: 520px;
		width: 96px;
		height: 610px;
	}
	#e5img{
		position: relative;
		pointer-events: none;
		line-height: 1;
		height: 610px;
		width: 430px;
		float: left;
	}
</style>

можно как нибудь с css вставить стрелки внутрь не используя transfom или left,right

Answer 1

[Максим]

Абсолютным позиционированием
К примеру имеем Родительский Блок с изображением он имеет относительное позиционирование,
И имеем вложенный блок который расположен абсолютно т.е top:0; left:0; и имеет ширину и высоту в 100% внутри содержимое можно располагать как угодно