Detailed explanation of the usage of 5 different values of CSS position
|
The position property The position property specifies the type of positioning method (static, relative, fixed, absolute, or sticky) to use for an element. There are five different values: •static The element is then positioned using the top, bottom, left, and right properties. However, these properties will have no effect unless the position property is set first. Depending on the position value, they work differently. position:static; By default, HTML elements are positioned statically. Statically positioned elements are not affected by the top, bottom, left, and right properties. An element with position:static; is not positioned in any special way; it is always positioned according to the normal flow of the page: This <div> element has position:static;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>A position:static element does not have any special positioning; it is always positioned according to the normal flow of the page:</p>
<div class="static">
The position of this div element is: static;
</div>
</body>
</html>position:relative; An element with position: relative; is positioned relative to its normal position. Setting the top, bottom, left, and right properties of a relatively positioned element will adjust it away from its normal position. Other content will not be adjusted to fit any whitespace left by the element. This <div> element has position:relative;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position:relative; positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>position:fixed; The element with position:fixed; is positioned relative to the viewport, which means it always stays in the same position even if the page is scrolled. The top, bottom, left, and right properties are used to position an element. Fixed elements do not leave gaps in the page where they would normally be located. Notice the fixed element in the lower right corner of the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css tutorial (jc2182.com)</title>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position:fixed;</h2>
<p>position:fixed; is positioned relative to the viewport, which means it always stays in the same position even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>position:absolute; An element with position: absolute; is positioned relative to the nearest positioned ancestor (rather than relative to the viewport, like fixed ). However; if the absolutely positioned element has no positioned ancestor, it will use the document body, and move with the page scroll. NOTE: The position of a "positioned" element is any element except static.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css tutorial (jc2182.com)</title>
<style>
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;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (rather than relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>position:sticky; position:sticky; positions the element based on the user's scroll position. The sticky element switches between relative and fixed depending on the scroll position. It is relatively positioned until the given offset position is met in the viewport - then it "sticks" in place (like position: fixed). Note: Internet Explorer, Edge 15 and earlier do not support sticky positioning. Safari requires the -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, top: 0 makes the sticky element stick to the top of the page when you reach its scroll position.
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try <b>scrolling</b> within this frame to see how sticky positioning works. </p>
<p>Note: IE/Edge15 and earlier versions do not support position: sticky;. </p>
<div class="sticky">I'm sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0) when you reach its scroll position. </p>
<p>Scroll up to remove stickiness. </p>
<p>Some text to enable scrolling.. I have always been a very good person, and I have always thought that I could do this. I have always been very good at it. I have always been very good at it.</p>
<p>Some text to enable scrolling.. I have always been a very good person, and I have always thought that I could do this. I have always been very good at it. I have always been very good at it.</p>
<p>Some text to enable scrolling.. I have always been a very good person, and I have always thought that I could do this. I have always been very good at it. I have always been very good at it.</p>
<p>Some text to enable scrolling.. I have always been a very good person, and I have always thought that I could do this. I have always been very good at it. I have always been very good at it.</p>
</div>
</body>
</html>Experience it online and reach its scroll position All CSS positioning properties
Summarize The above is the usage of 5 different values of CSS position introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: When catalina.bat is set to UTF-8 in Tomcat, garbled characters appear on the console
>>: How to hide the border/separation line between cells in a table
Recommend
Use of provide and inject in Vue3
1. Explanation of provide and inject Provide and ...
Detailed explanation of MySQL/Java server support for emoji and problem solving
This article describes the support and problem so...
Responsive Web Design Learning (2) — Can videos be made responsive?
Previous episode review: Yesterday we talked abou...
7 Best VSCode Extensions for Vue Developers
Adding the right VS Code extension to Visual Stud...
A brief talk about JavaScript parasitic composition inheritance
Composition inheritance Combination inheritance i...
Differences between MySQL MyISAM and InnoDB
the difference: 1. InnoDB supports transactions, ...
Win10 installation of MySQL5.7.18winX64 failed to start the server and no error message
System environment: Win10 64-bit MySQL version: m...
Samba server configuration under Centos7 (actual combat)
Samba Overview Samba is a free software that impl...
How to import CSS styles into HTML external style sheets
The link-in style is to put all the styles in one...
CSS fills the parent container div with img images and adapts to the container size
When multiple images are introduced into a page, ...
Web page WB.ExecWB control printing method call description and parameter introduction
Web page WB.ExecWB control printing method Copy c...
Analysis of MySQL's planned tasks and event scheduling examples
This article uses examples to describe MySQL'...
Database SQL statement optimization
Why optimize: With the launch of the actual proje...
Tutorial on configuring and using i3 window manager in Linux
In this article, I will show you how to install a...
In-depth explanation of Session and Cookie in Tomcat
Preface HTTP is a stateless communication protoco...