layout position 03

layout position 03

by Boba Poshtar

HTML

<div class="first">
	<div>
		test
		<span class="a">A</span>
		<span class="b">B</span>
		<span class="c">C</span>
		<span class="left">left</span>
		<span class="top">top</span>
	</div>
</div>

<div class="hide">
	<div>
		<div class="relative">
			<div>
				test
				<span class="a">A</span>
				<span class="b">B</span>
				<span class="c">C</span>
				<span class="left">left</span>
				<span class="top">top</span>
			</div>
		</div>
	</div>
</div>
<button>show next box</button>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
end of body

CSS

div { padding: 20px; border: 1px solid #aaa;}
.first { margin-bottom: 20px;}
.first span { background: orange;}
span { position: absolute; width: 50px;}
span.a { left: 50px; top: 5px;}
span.b { right: -20px; top: -8px;}
span.c { left: 50%; bottom: 0;}
span.left { left: 150px;}
span.top { top: 60px;}
.relative { position: relative; border-color: red;}
.hide { display: none;}

JavaScript

document.querySelector('button').onclick = function(){
	document.querySelector('.hide').classList.remove('hide');
	this.classList.add('hide');
}