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
•relative
•fixed
•absolute
•sticky

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

property	describe
bottom	Sets the bottom edge of the positioning box
clip	Clipping an absolutely positioned element
left	Sets the left edge of the positioning box
position	Specifies the positioning type of an element
right	Sets the right edge of the positioning box
top	Sets the top edge of the positioning box
z-index	Sets the stacking order of elements

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!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: 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