Overlap without z-index settings in HTML and CSS
Description
The following code shows how to overlap without z-index settings.
Example
<!-- w w w .j a v a2 s . c om-->
<html>
<head>
<style type='text/css'>
div {
position: absolute;
padding: 10px;
border: 1px solid black;
opacity: 0.9;
background: lightyellow;
width: 100px;
height: 100px;
top: 20px;
left: 20px;
}
div + div {
background: lightblue;
top: 40px;
left: 40px;
}
div + div + div {
background: lightgreen;
top: 60px;
left: 60px;
}
div + div + div + div {
background: pink;
top: 80px;
left: 80px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
The code above generates the following result.
HTML CSS Tutorial Z Index
Combine z-index settings and opacity in HTM...
Use Z-index with absolute Positioning in HT...
Use z-index and child selector in HTML and ...
Use z-index and sibling selector in HTML an...
Use z-index to create layer in HTML and CSS
Combine z-index settings and opacity in HTM...
Overlap without z-index settings in HTML an...
Set z-index along with child index in HTML ...Use Z-index with absolute Positioning in HT...
Use z-index and child selector in HTML and ...
Use z-index and sibling selector in HTML an...
Use z-index to create layer in HTML and CSS