Programming Examples

Css code to create 3 different colors box which partially overlapped to each other


Overlapped object using CSS

White CSS code to create 3 different colors box which partially overlapped to each other. For Sample.

Solution

<!DOCTYPE HTML>
<html>
	<head>
		<style type="text/css">
			div{
			width:150px;
			height:150px;
			position:absolute;
			opacity:.5;
			}
			.box1{
			background:red;
			
			}
			.box2{
			background:green;
			top:50px;
			left:50px;
			}
			.box3{
			background:blue;
			top:100px;
			left:100px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>
Output


Latest Current Affairs 2025 Online Exam Quiz for One day Exam Online Typing Test CCC Online Test 2025 Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level Online Test in Hindi Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Sarkari Exam Quiz