Assignments Of Class 26: CSS Z-Index and Stacking Context
Assignment 1: Basic Z-Index Layout
Objective: Create a layout where two elements overlap, using z-index to control their stacking order.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Z-Index Layout</title>
<style>
.box1 {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
z-index: 1; /* Box 1 on top */
}
.box2 {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
z-index: 0; /* Box 2 below Box 1 */
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Explanation:
- .box1 is positioned at the top with z-index: 1, and .box2 is positioned below it with z-index: 0.
- This allows .box1 to appear on top of .box2.
Output:
- The red box (.box1) will appear above the blue box (.box2).
Assignment 2: Overlapping Text and Image
Objective: Place an image and text on the same position using z-index, where the text appears on top of the image.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text on Image</title>
<style>
.image {
position: relative;
width: 300px;
height: 200px;
background-image: url('https://via.placeholder.com/300x200');
background-size: cover;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
z-index: 1; /* Text on top */
}
</style>
</head>
<body>
<div class="image">
<div class="text">This is some text on the image</div>
</div>
</body>
</html>
Explanation:
- The text is absolutely positioned inside the image, and z-index: 1 ensures it stays above the image.
Output:
- The text is displayed on top of the image.
Assignment 3: Stacking Multiple Elements
Objective: Layer three elements and control their stacking order with different z-index values.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Layering</title>
<style>
.box1 {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
z-index: 3;
}
.box2 {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
z-index: 2;
top: 50px;
left: 50px;
}
.box3 {
position: absolute;
width: 200px;
height: 200px;
background-color: green;
z-index: 1;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
Explanation:
- box1 (red) is placed on top with z-index: 3, followed by box2 (blue) with z-index: 2, and box3 (green) at the bottom with z-index: 1.
Output:
- Red box will be on top, followed by the blue box, and green will be at the bottom.
Assignment 4: Understanding Stacking Context
Objective: Create a stacking context and control the z-index of elements inside it.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacking Context</title>
<style>
.container {
position: relative;
width: 400px;
height: 400px;
background-color: lightgray;
z-index: 0; /* Create stacking context */
}
.box1 {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
z-index: 2;
}
.box2 {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
z-index: 1;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
Explanation:
- The .container creates a new stacking context because of position: relative.
- The z-indexes of .box1 and .box2 are controlled within this new stacking context.
Output:
- The red box will be stacked on top of the blue box within the container.
Assignment 5: Nested Stacking Contexts
Objective: Create nested stacking contexts and control the order of elements within them.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Stacking Contexts</title>
<style>
.outer {
position: relative;
width: 400px;
height: 400px;
background-color: lightyellow;
z-index: 0;
}
.inner {
position: relative;
width: 200px;
height: 200px;
background-color: lightblue;
z-index: 1;
}
.box1 {
position: absolute;
width: 150px;
height: 150px;
background-color: red;
z-index: 2;
}
.box2 {
position: absolute;
width: 150px;
height: 150px;
background-color: green;
z-index: 1;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
</body>
</html>
Explanation:
- The .outer and .inner containers create separate stacking contexts.
- The .box1 and .box2 are stacked inside the .inner container with their z-index values.
Output:
- Red box is on top of the green box inside the .inner container, and the .inner container is placed above .outer.
Assignment 6: Z-Index with Opacity
Objective: Experiment with z-index and opacity to observe how transparency affects stacking order.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-Index with Opacity</title>
<style>
.box1 {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
z-index: 2;
}
.box2 {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
z-index: 1;
top: 50px;
left: 50px;
opacity: 0.5; /* Semi-transparent box */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Explanation:
- The red box is opaque and has a higher z-index, so it will appear above the semi-transparent blue box.
- The blue box has an opacity of 0.5, which makes it semi-transparent.
Output:
- The red box will appear above the blue box, but the blue box will be semi-transparent.
Assignment 7: Z-Index and CSS Transitions
Objective: Use z-index and transition to create a dynamic stacking effect.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-Index with Transition</title>
<style>
.box {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
z-index: 1;
transition: z-index 0.5s;
}
.box:hover {
z-index: 2; /* On hover, box comes on top */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explanation:
- The .box element has a default z-index of 1. When hovered, the z-index is changed to 2, making it come to the top.
- A transition is added to smoothly change the z-index.
Output:
- When the user hovers over the red box, it will smoothly transition and come on top.
Assignment 8: Z-Index with Fixed Positioning
Objective: Use position: fixed along with z-index to create a fixed header that stays on top.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Header with Z-Index</title>
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: red;
z-index: 10; /* Stays on top */
padding: 10px;
}
.content {
margin-top: 50px;
background-color: lightgray;
height: 2000px;
}
</style>
</head>
<body>
<div class="header">This is a fixed header</div>
<div class="content">Scroll down to see the effect</div>
</body>
</html>
Explanation:
- The .header has position: fixed and a high z-index to stay on top of the content while scrolling.
Output:
- The red header will stay fixed at the top of the page as the user scrolls through the content.
Assignment 9: Z-Index with Multiple Containers
Objective: Control stacking order with multiple containers and nested elements.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Containers</title>
<style>
.container1 {
position: relative;
width: 400px;
height: 400px;
background-color: lightyellow;
z-index: 2;
}
.container2 {
position: relative;
width: 300px;
height: 300px;
background-color: lightgreen;
z-index: 1;
}
.box1 {
position: absolute;
width: 150px;
height: 150px;
background-color: red;
z-index: 3;
}
</style>
</head>
<body>
<div class="container1">
<div class="container2">
<div class="box1"></div>
</div>
</div>
</body>
</html>
Explanation:
- The .container1 has a z-index of 2, and .container2 has a z-index of 1.
- The .box1 inside .container2 has a z-index of 3, making it appear on top of everything.
Output:
- The red box will appear on top of everything within .container2, even though .container2 is inside .container1.
Assignment 10: Z-Index with position: absolute and position: relative
Objective: Compare the behavior of z-index with position: absolute and position: relative.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Absolute and Relative</title>
<style>
.relative-box {
position: relative;
width: 200px;
height: 200px;
background-color: blue;
z-index: 1;
}
.absolute-box {
position: absolute;
width: 150px;
height: 150px;
background-color: red;
z-index: 2;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="relative-box">
<div class="absolute-box"></div>
</div>
</body>
</html>
Explanation:
- The .relative-box has a position: relative with z-index: 1, while the .absolute-box is positioned inside it with position: absolute and z-index: 2.
- The .absolute-box will appear on top of .relative-box due to its higher z-index.
Output:
- The red box will appear on top of the blue box, as it is positioned absolutely inside the relative container.
No comments:
Post a Comment