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
Detailed tutorial on installing Prometheus with Docker
Table of contents 1. Install Node Exporter 2. Ins...
Web page HTML ordered list ol and unordered list ul
Lists for organizing data After learning so many ...
Vue's detailed code for implementing the shuttle box function
Vue - implement the shuttle box function, the eff...
Introduction to the use of em in elastic layout in CSS3: How many pixels is 1em?
I have been using CSS for a long time, but I have...
Introduction to MySQL Connection Control Plugin
Table of contents 1. Introduction to the connecti...
How to elegantly implement WeChat authorized login in Vue3 project
Table of contents Preface Prepare Implementation ...
Vue mobile terminal realizes the whole process of left sliding editing and deletion
Preface According to the project needs, Vue-touch...
How InnoDB cleverly implements transaction isolation levels
Preface In the previous article Detailed Explanat...
Linux uses Rsync+Inotify to achieve real-time synchronization of local and remote data
0x0 Test Environment The headquarters production ...
How to understand JS function anti-shake and function throttling
Table of contents Overview 1. Function debounce 2...
How to generate Hive table creation statement comment script in MySQL metadata
Preface This article mainly introduces the releva...
Prototype and prototype chain prototype and proto details
Table of contents 1. Prototype 2. Prototype chain...
Detailed explanation of six web page image carousel effects implemented with JavaScript
Table of contents 1. When the mouse passes over t...
Native JS to implement image carousel JS to implement small advertising plug-in
Recently I want to use native JS to implement som...
How to change the host name in Linux
1. View the current host name [root@fangjian ~]# ...