vcgit-forge/practice-fusion
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/practice-fusion.git synced 2026-02-10 03:33:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Understanding CSS z-index && positioning.

Browse Source
This commit is contained in:
Raghu-Ch
2017-02-05 23:14:00 -08:00
commit b94d8d551e
2 changed files with 97 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
z-index/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS-Postioning</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute; </div>
<div id="reldiv1">
<br /><span class="bold">DIV #2</span>
<br />position: relative; </div>
<div id="reldiv2">
<br /><span class="bold">DIV #3</span>
<br />position: relative; </div>
<div id="absdiv2">
<br /><span class="bold">DIV #4</span>
<br />position: absolute; </div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning </div>
</body>
</html>

70
z-index/main.css Normal file
View File

@@ -0,0 +1,70 @@
/**
* @file
* This is style sheet for the index.html@z-index.
*
* Understanding CSS z-index && positioning.
* Stacking without z-index.
* This file contains set of rules for positioning css elements.
*/
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bold {
font-weight: bold;
font: 12px Arial;
}
#normdiv {
height: 70px;
border: 1px dashed #999966;
background-color: #e8e230;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1 {
opacity: 0.7;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #30e8bd;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
opacity: 0.7;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #30e8bd;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #e86830;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #e86830;
text-align: center;
}