Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
div.static {
position: static;
border: 3px solid #73AD21;
}
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
Here is the CSS that is used:
Example
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.
In this example, the sticky element sticks to the top of the page (top: θ), when you reach its scroll position.
Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Try it Yourself:
Top Left>>
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="https://edurev.gumlet.io/mg_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
Add some text to an image in the top left corner:
Top Right>>
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="https://edurev.gumlet.io/mg_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>
Add some text to an image in the top right corner:
Bottom Left>>
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>
<div class="container">
<img src="https://edurev.gumlet.io/mg_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomleft">Bottom Left</div>
</div>
</body>
</html>
Add some text to an image in the bottom left corner:
Bottom Right
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>
<div class="container">
<img src="https://edurev.gumlet.io/mg_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomright">Bottom Right</div>
</div>
</body>
</html>
Add some text to an image in the bottom right corner:
Centered>>
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in image:</p>
<div class="container">
<img src="https://edurev.gumlet.io/mg_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="center">Centered</div>
</div>
</body>
</html>
h1 {
____ : ____ ;
____ : 50px;
____ : 10px;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
<style>
h1 {
position : fixed ;
top : 50px;
right : 10px;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|