Position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Position</title>
<style>
.static {
position: static;
border: 3px solid blue;
}
.relative {
position: relative;
left: 90px;
border: 3px solid blue;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid blue;
}
.relativeAbs {
position: relative;
width: 400px;
height: 200px;
border: 3px solid blue;
}
.absolute {
position: absolute;
bottom: 0px;
right: 0px;
width: 200px;
height: 100px;
border: 3px solid blue;
background-color: lightblue;
}
.sticky {
position: sticky;
top: 0px;
padding: 5px;
background-color: lightblue;
border: 2px solid blue
}
</style>
</head>
<body>
<!--
position : specifies type of positioning method used for an element.
There are five different position values:
- static : HTML elements are positioned static by default.
- relative : is positioned relative to its normal position.
- fixed : is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
- absolute : is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
- sticky : is positioned based on the user's scroll position.
All CSS Positioning Properties:
- bottom : Sets the bottom margin edge for a positioned box
- clip : Clips an absolutely positioned element
- left : Sets the left margin edge for a positioned box
- position : Specifies the type of positioning for an element
- right : Sets the right margin edge for a positioned box
- top : Sets the top margin edge for a positioned box
-->
<h1>Demo: Postion </h1>
<h3>Demo Postion(static)</h3>
<div class="static">
<img class="img1" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#1">
<img class="img2" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#2">
<img class="img3" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#3">
</div>
<br>
<h3>Demo Postion(relative)</h3>
<div class="relative">
<img class="img1" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#1">
<img class="img2" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#2">
<img class="img3" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#3">
</div>
<br>
<div class="fixed">
<h3>Demo Postion(fixed)</h3>
<img class="img1" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#1">
<img class="img2" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#2">
<img class="img3" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#3">
</div>
<br>
<h3>Demo Postion(relative & absolute)</h3>
<div class="relativeAbs">
<img class="img1" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#1">
<img class="img2" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#2">
<img class="img3" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#3">
<div class="absolute">
<img class="img1" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#1">
<img class="img2" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#2">
<img class="img3" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#3">
</div>
</div>
<br>
<h3>Demo Postion(sticky)</h3>
<div class="sticky">
<img class="img1" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#1">
<img class="img2" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#2">
<img class="img3" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#3">
<img class="img4" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#4">
<img class="img5" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#5">
<img class="img6" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#6">
<img class="img7" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#7">
<img class="img8" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#8">
<img class="img9" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#9">
</div>
<br>
<div style="height:3000px;">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore optio et obcaecati assumenda id velit saepe amet necessitatibus enim, fugit adipisci a porro dicta quos nisi. Modi rem pariatur commodi expedita incidunt. Modi cupiditate quam at. Quas eius quaerat odio, iure velit vitae iste quae accusamus qui ad aperiam magnam! Quis minus dolorem assumenda doloremque ea, veritatis obcaecati voluptate vero impedit error reiciendis sit delectus cupiditate repellendus temporibus cum earum in voluptatum aliquam, incidunt dicta culpa, quia est enim! Ipsa, necessitatibus quis! Ab deserunt quae magnam, eaque et dolore iure modi asperiores officia ex dolores sit possimus exercitationem quo, tempora quidem neque voluptatem, consectetur earum non harum pariatur vel accusamus! Reiciendis voluptatum architecto quibusdam officiis facere et nesciunt, dolorem illum ex, sequi consequatur nobis numquam incidunt? Error cum distinctio enim omnis aspernatur alias, minima ullam quo ipsum numquam. Totam esse laboriosam fugiat, nulla iste ad numquam sit maiores dolore! Voluptatem rerum, cupiditate veniam magnam illo possimus eum qui sequi veritatis, autem placeat dolorum! Eligendi reprehenderit ut est saepe iste fuga quidem, illum culpa illo, asperiores dolore enim officia nesciunt beatae eius sed commodi neque autem? Hic, totam deserunt nemo, atque saepe aspernatur nihil omnis dolorem odit ipsa consequatur doloribus corporis suscipit voluptatem in? Officiis iure vero consectetur impedit dolorem? Officiis id maiores doloremque sunt velit impedit est ex? Quam incidunt porro commodi, ipsam fuga quo perferendis omnis nulla esse. Delectus autem rem veniam ratione suscipit quas, recusandae incidunt? Magnam, ea odit, quasi quas obcaecati dignissimos ratione officia, iusto odio sint impedit culpa. Recusandae ullam iure ipsum neque, molestias assumenda doloremque sed repellat, omnis beatae quia rem vel, ab expedita eius incidunt fugiat iste dolorem exercitationem labore numquam ea modi! Esse ducimus quia consequuntur, rem pariatur ipsa debitis doloremque id itaque! Possimus dolor non magni commodi doloribus. Exercitationem reiciendis consequuntur quod.</p>
</div>
</body>
</html>