In CSS, absolute and fixed are both values for the position property, which is used to position an element on a web page.
When an element has position: absolute, it is positioned relative to its closest positioned ancestor element. If no ancestor element is positioned, then the element is positioned relative to the body element. This means that the element is removed from the normal document flow, and its position is set by the top, bottom, left, and right properties.
On the other hand, when an element has position: fixed, it is positioned relative to the viewport, which means it always stays in the same position even if the page is scrolled. This means that the element is also removed from the normal document flow, and its position is set by the top, bottom, left, and right properties.
In short, absolute positioning is relative to the nearest positioned ancestor element, while fixed positioning is relative to the viewport.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Well known experimental html code.
.first{
width: 400px;
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
}
.second {
max-width: 400px;
margin: auto;
border: 1px solid red;
background: yellow;
position: fixed;
bottom: 0px;
left: 0px;
}
In this CSS code, we have two div elements, .first and .second. The .first div has a width of 400 pixels and a red border. It is positioned absolutely with the top and left properties set to 0 pixels, which means it will be positioned relative to its nearest positioned ancestor element or the initial containing block if there is no positioned ancestor.
The .second div has a max-width of 400 pixels, a red border, and a yellow background color. It is positioned fixed with the bottom and left properties set to 0 pixels, which means it will be positioned relative to the browser viewport and will stay in the same position even if the page is scrolled.
Here's an example HTML code with internal CSS that demonstrates the difference between position: absolute and position: fixed:
<!DOCTYPE html>
<html>
<head>
<title>Absolute vs Fixed Positioning</title>
<style>
.first {
width: 400px;
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
}
.second {
max-width: 400px;
margin: auto;
border: 1px solid red;
background: yellow;
position: fixed;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="first">
<h2>This is a div with absolute positioning.</h2>
<p>This div is positioned absolutely at the top-left corner of the page, because it has a position property of "absolute" and top and left values of 0.</p>
</div>
<div class="second">
<h2>This is a div with fixed positioning.</h2>
<p>This div is positioned fixed at the bottom-left corner of the page, because it has a position property of "fixed" and bottom and left values of 0.</p>
</div>
</body>
</html>
In this example, the first div is positioned absolutely at the top-left corner of the page, while the second div is positioned fixed at the bottom-left corner of the page. You can see the difference in their behavior by scrolling the page and observing how the second div remains fixed in place, while the first div moves along with the page.
No comments:
Post a Comment