Scribd
Upload
43 views2 pages

CSS Fixed Positioning Explained

The document is an HTML file demonstrating the use of the CSS 'bottom' property with fixed positioning. It includes a container with three boxes positioned at different distances from the bottom of the parent container. The boxes are styled with different background colors to illustrate their placement.

Uploaded by

Abdulwaheed Toheeb Olanrewaju
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views2 pages

CSS Fixed Positioning Explained

The document is an HTML file demonstrating the use of the CSS 'bottom' property with fixed positioning. It includes a container with three boxes positioned at different distances from the bottom of the parent container. The boxes are styled with different background colors to illustrate their placement.

Uploaded by

Abdulwaheed Toheeb Olanrewaju
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html>

<head>
<style>
.container {
position: relative;
background-color: lightgray;
height: 700px;
}

.boxes {
position: fixed;
border: 3px solid black;
padding: 10px;
width: 20%;
}

.box {
bottom: auto;
background-color: lightcoral;
}

.box2 {
bottom: 75px;
background-color: lightgreen;
}

.box3 {
bottom: 2%;
background-color: lightblue;
}
</style>
</head>

<body>
<h2>
CSS bottom property
</h2>
<p>
Position: Fixed, the fixed position places
the element at a fixed position even during
a scroll.
</p>
<p>
For all the boxes, the parent is the grey
container with 'relative' position, so they
have been placed at auto, 75px and 2% from
the parent's bottom edge.
</p>
<div class="container">
<div class=" boxes box">
Position: Fixed, bottom: auto
</div>
<div class=" boxes box2">
Position: Fixed, bottom: 75px
</div>
<div class="boxes box3">
Position: Fixed, bottom: 2%
</div>
</div>
</body>

</html>

You might also like