CSS Positions

css-positions.markdown

CSS Positions

A Pen by shad on CodePen.

License.

index.html

<div class="parent">
<div id="c1">&nbsp</div>
<div id="c2">&nbsp</div>
 <div id="c3">&nbsp</div>
 <div id="c4">&nbsp</div>
  <div id="c8">Test Div</div>
<div id="c5">&nbsp</div>
<div id="c6">&nbsp</div>
<div id="c7">&nbsp</div>
  <div style="height:500px; background-color:grey">Rest</div>  

</div>



<button id="pos-rel-btn">Relative Position</button>
<button id="pos-abs-btn">Absolute Position</button>
<button id="pos-fix-btn">Fixed Position</button>
<button id="pos-sticky-btn">Sticky Position</button>
<button id = "pos-static-btn">Static Position</button>
<span id="sp">Current Selected Position:</span>
<label id="current">NAN</label>

script.js

import $ from "https://esm.sh/jquery";

$("#pos-rel-btn").click(function(){
  $("#c8").removeClass().addClass("pos-rel-class");
  $("#current").html("Relative");
});

$("#pos-abs-btn").click(function(){
  $("#c8").removeClass().addClass("pos-abs-class");
    $("#current").html("Absolute");
});

$("#pos-fix-btn").click(function(){
  $("#c8").removeClass().addClass("pos-fix-cls");
    $("#current").html("Fixed");
});
$("#pos-sticky-btn").click(function(){
  $("#c8").removeClass().addClass("pos-sticky-cls");
    $("#current").html("Sticky");
});

$("#pos-static-btn").click(function(){
  $("#c8").removeClass().addClass("pos-static-cls");
    $("#current").html("Static(Default)");
});

style.css

#c1{
  background-color:red;
}
#c2{
  background-color:orange;
}
#c3{
  background-color:yellow;
}
#c4{
  background-color:green;
}
#c5{
  background-color:blue;
}
#c6{
  background-color:indigo;
}
#c7{
  background-color:violet;
}
#c8{
  background-color:black;
  color:white;
  width:100px;
}

#pos-rel-btn
{
  position: absolute;
  top: 400px;
  left: 250px;
}
#pos-abs-btn{
  position: absolute;
  top:400px;
  left: 100px;
}
#pos-fix-btn{
  position: absolute;
  top:350px;
  left: 100px;
}

#pos-sticky-btn{
  position: absolute;
  top:350px;
  left: 250px;
}

#pos-static-btn{
  position: absolute;
  top:350px;
  left: 400px;
}

.pos-rel-class{
  position:relative;
  top: 100px;
}

.pos-abs-class{
  position:absolute;
  top:10px;
}

.pos-fix-cls{
  position:fixed; 
  top:10px;
}
.pos-sticky-cls{
  position: sticky;
  top:10px;
  left:40px;
}
.pos-static-cls
{
  position: static;
}
#current
{
  position: absolute;
  top:300px;
  left:275px;
}
#sp
{
  position: absolute;
  top:300px;
  left:80px;
}
.parent{
  height: 2000px;
  
}

.ht{
  height: 50px;
}

Css positions testing.