position
属性指定的类型 用于元素的定位方法(静态、相对、固定、绝对或 黏)。
position
属性指定用于元素的定位方法的类型。
有五种不同的位置值:
static
relative
fixed
absolute
sticky
然后使用顶部、底部、左侧和右侧定位元素 特性。但是,除非位置
,否则这些属性将不起作用 首先设置属性。根据职位的不同,他们的工作方式也有所不同 价值。
position: static;
HTML 元素默认定位为静态。
静态定位元素不受 top、bottom、left、right 属性的影响。
具有 position: static;
的元素不以任何特殊方式定位;这是 始终根据页面的正常流程定位:
这是使用的 CSS:
div.static {
position: static;
border: 3px solid #73AD21;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
位置:相对;
具有 position:relative;
的元素相对于其正常位置定位。
设置相对定位元素的 top、right、bottom、left 属性会导致 将其调整远离其正常位置。其他内容将不会被调整以适应留下的任何空白 元素。
这是使用的 CSS:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
位置:固定;
具有 position:fixed;
的元素相对于视口定位,这意味着它始终 即使页面滚动,也保持在同一位置。顶端, right、bottom 和 left 属性用于定位元素。
固定元素不会在其通常所在的页面中留下间隙。
请注意页面右下角的固定元素。这是使用的 CSS:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
position: fixed;
位置:绝对;
具有 position:absolute;
的元素相对于最近的定位祖先进行定位 (而不是相对于视口定位,如固定)。
然而;如果绝对定位的元素没有定位的祖先, 它使用文档主体,并随着页面滚动而移动。
注意:绝对定位的元素将从正常流中删除,并且可以重叠元素。
这是一个简单的例子:
这是使用的 CSS:
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;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<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 (instead of positioned 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;
的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对
和固定
之间切换。它相对定位,直到在视口中满足给定的偏移位置 - 然后它“粘”在适当的位置(如位置:固定)。
注意:Internet Explorer 不支持粘性定位。 Safari 需要 -webkit- 前缀(参见下面的示例)。您还必须至少指定 top
、right
、 之一底部
或左侧
粘性定位工作。
在此示例中,当您到达其滚动位置时,粘性元素会粘在页面顶部 (top: 0
)。
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
自己尝试一下 →
<!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 to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am 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 back up to remove the stickyness.</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>
如何将文本放置在图像上:
自己尝试一下:
左上→
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
右上角→
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>
左下 →
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomleft">Bottom Left</div>
</div>
</body>
</html>
右下→
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomright">Bottom Right</div>
</div>
</body>
</html>
居中 →
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in image:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="center">Centered</div>
</div>
</body>
</html>
此示例演示如何设置元素的形状。该元素被剪裁成该形状并显示。
设置元素的形状
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140">
</body>
</html>
设置定位框的下边距边缘
剪辑绝对定位的元素
设置定位框的左边距边缘
指定元素的定位类型
设置定位框的右边距边缘
设置定位框的上边距边缘