From b94d8d551e2a980cd475f606aa09385d91766149 Mon Sep 17 00:00:00 2001 From: Raghu-Ch Date: Sun, 5 Feb 2017 23:14:00 -0800 Subject: [PATCH] Understanding CSS z-index && positioning. --- z-index/index.html | 27 ++++++++++++++++++ z-index/main.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+) create mode 100644 z-index/index.html create mode 100644 z-index/main.css 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; +}