Home >Web Front-end >CSS Tutorial >What are the uses of position attribute in css
What are the uses of position attribute in css
- 王林forward
- 2020-03-16 10:42:233759browse
position attribute
The position attribute specifies the type of positioning method used for the element (static, relative, fixed, absolute, or sticky). There are five different values:
•static
•relative
•fixed
•absolute
•sticky
Then use top, bottom, The left and right attributes position the element. However, these properties will have no effect unless the position property is set first. They also work differently depending on the position value.
position:static;
By default, HTML elements are positioned static. Static positioned elements are not affected by the top, bottom, left and right attributes. The element position:static; is not positioned in any special way; it is always positioned according to the normal flow of the page:
(Recommended tutorial: CSS Getting Started Tutorial)
This< ;div> element's 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>一个位置为position:static; 没有任何特殊的定位; 它是始终根据页面的正常流程定位：</p>
<div class="static">
这个div元素的位置为：static;
</div>
</body>
</html>position:relative;
An element with position:relative; positioned relative to its normal position. Setting the top, bottom, left, and right properties of a relatively positioned element will cause it to adjust away from its normal position. Other content will not be adjusted to fit any white space left by the element.
The position of this dc6dce4a544fdca2df29d5ac0ea9906b element: 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>position:relative的元素; 相对于其正常位置定位：</p>
<div class="relative">
这个div元素有position: relative;
</div>
</body>
</html>position:fixed;
The element position:fixed;is positioned relative to the viewport , which means it always stays in the same position even if the page scrolls. The top, bottom, left and right attributes are used to position elements. Fixed elements leave no gaps in the page where they would normally be. Notice the fixed element in the lower right corner of the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css教程（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; 相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置：</p>
<div class="fixed">
这个div元素有position: fixed;
</div>
</body>
</html>position:absolute;
Elements with position:absolute; are positioned relative to their most recently positioned ancestor (rather than positioned relative to the viewport, as in fixed). However; if an 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教程（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>position:absolute;的元素; 相对于最近定位的祖先定位（而不是相对于视口定位，如fixed）：</p>
<div class="relative">这个div元素有 position: relative;
<div class="absolute">这个div元素有 position: absolute;</div>
</div>
</body>
</html>position:sticky;
position:sticky;Positions elements based on the user's scroll position. Sticky elements toggle between relative and fixed depending on scroll position. It is positioned relatively until the given offset position is met in the viewport - then it "sticks" in place (as in position:fixed).
Note: Internet Explorer, Edge 15 and earlier versions 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, the sticky element sticks 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>尝试在此框架内<b>滚动</b>以了解粘性定位的工作原理。</p>
<p>注意：IE/Edge15及更早版本不支position: sticky;。</p>
<div class="sticky">我很粘!</div>
<div style="padding-bottom:2000px">
<p>在此示例中，当您到达其滚动位置时，粘性元素会粘到页面顶部（顶部：0）。</p>
<p>向上滚动以消除粘性。</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html> Recommended related video tutorials: css video tutorial
The above is the detailed content of What are the uses of position attribute in css. For more information, please follow other related articles on the PHP Chinese website!