Static position is the default position for any element on a webpage. When an element is positioned as static, it is placed according to the normal flow of the page, and it cannot be moved from that position even if the page is scrolled.
Fixed position, on the other hand, is used to position elements that should stay in a fixed location on the screen, regardless of scrolling. Elements with fixed position are positioned relative to the browser window, rather than the normal flow of the page. This means that they will stay in the same location even if the page is scrolled.
<!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>
Our experimental simple html page.
.first{
width: 400px;
border: 1px solid red;
position: static;
}
.second {
max-width: 400px;
margin: auto;
border: 1px solid red;
background: yellow;
position: fixed;
bottom: 0px;
left: 0px;
}
In this CSS code, there are two div elements with the classes "first" and "second".
The first div has a width of 400 pixels and a red border. Its position property is set to static, which is the default value and means that the element will be positioned according to the normal flow of the page.
The second div has a maximum width of 400 pixels and a red border. It has a yellow background color and its position property is set to fixed. This means that the element will be positioned relative to the browser window and will not move when the page is scrolled. The bottom and left properties are also set to 0 pixels, which means the element will be fixed to the bottom left corner of the window.
Here's an example that demonstrates the differences between static and fixed positioning using internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Static vs Fixed</title>
<style>
.container {
width: 800px;
margin: 0 auto;
background-color: #f2f2f2;
padding: 20px;
border: 1px solid #ccc;
}
.static {
position: static;
width: 300px;
height: 150px;
background-color: #a9a9a9;
margin: 20px;
padding: 20px;
border: 1px solid #333;
}
.fixed {
position: fixed;
width: 300px;
height: 150px;
background-color: #ffa500;
margin: 20px;
padding: 20px;
border: 1px solid #333;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Static vs Fixed</h1>
<div class="static">
<h2>Static</h2>
<p>This box is positioned statically, which means it follows the normal flow of the document. If you scroll the page, the box will scroll along with the content.</p>
</div>
<div class="fixed">
<h2>Fixed</h2>
<p>This box is positioned fixed, which means it stays in the same position relative to the viewport. If you scroll the page, the box will remain in the same place on the screen.</p>
</div>
</div>
</body>
</html>
In this example, we have a container div that has a width of 800px and is centered on the page. Inside the container, we have two divs, one with the class "static" and one with the class "fixed".
The "static" div has a position of static, which is the default positioning value, and a width of 300px. It has a gray background color and a border, and it's positioned 20px away from the edges of the container.
The "fixed" div has a position of fixed and is positioned 20px away from the bottom and right edges of the viewport. It has an orange background color and a border, and it's also 300px wide.
When you view this HTML file in a browser, you should see the two boxes side by side inside the container. If you scroll the page, you'll notice that the "static" box scrolls along with the content, while the "fixed" box stays in the same position on the screen.
No comments:
Post a Comment