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
How to use Linux tr command
01. Command Overview The tr command can replace, ...
Using an image as a label, the for attribute does not work in IE
For example: Copy code The code is as follows: <...
Detailed explanation of count(), group by, order by in MySQL
I recently encountered a problem when doing IM, a...
What are the new features of Apache Spark 2.4, which will be released in 2018?
This article is from the Apache Spark Meetup held...
Complete steps to install boost library under linux
Preface The Boost library is a portable, source-c...
Implement 24+ array methods in JavaScript by hand
Table of contents 1. Traversal Class 1. forEach 2...
Upgrade MySQL 5.1 to 5.5.36 in CentOS
This article records the process of upgrading MyS...
Vue implements div wheel zooming in and out
Implement div wheel zooming in and out in Vue pro...
A brief discussion on CSS blocking merging and other effects
Non-orthogonal margins When margin is used, it wi...
Detailed steps to install RabbitMQ in docker
Table of contents 1. Find the mirror 2. Download ...
A brief discussion on the differences between FTP, FTPS and SFTP
Table of contents Introduction to FTP, FTPS and S...
A practical guide to Vue project first screen performance optimization components
Table of contents Vue first screen performance op...
Perfect solution to the problem of connection failure after MySQL client authorization
Deploy the MySQL environment locally (192.168.1.1...
Native JS music player
This article example shares the specific code of ...
Methods and techniques for designing an interesting website (picture)
Have you ever encountered a situation where we hav...