commit b94d8d551e2a980cd475f606aa09385d91766149 Author: Raghu-Ch Date: Sun Feb 5 23:14:00 2017 -0800 Understanding CSS z-index && positioning. diff --git a/z-index/index.html b/z-index/index.html new file mode 100644 index 0000000..7e4bcd4 --- /dev/null +++ b/z-index/index.html @@ -0,0 +1,27 @@ + + + + + + + CSS-Postioning + + + +
+
DIV #1 +
position: absolute;
+
+
DIV #2 +
position: relative;
+
+
DIV #3 +
position: relative;
+
+
DIV #4 +
position: absolute;
+
+
DIV #5 +
no positioning
+ + diff --git a/z-index/main.css b/z-index/main.css new file mode 100644 index 0000000..ef781c4 --- /dev/null +++ b/z-index/main.css @@ -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; +}