html5css3教程———CSS Position(定位)网页定位 前段大G > 首页 > 网站公告 >
Position(网页定位)
position 属性的五个值：
static
relative
fixed
absolute
stic
ky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位的方法。
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
div.static { position: static; border: 3px solid #73AD21; }
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
p.pos_fixed { position:fixed; top:30px; right:5px; }
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }
移动相对定位元素，但它原本所占的空间不会改变。
h2.pos_top { position:relative; top:-50px; }
相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2 { position:absolute; left:100px; top:150px; }
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
div.sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
img { position:absolute; left:0px; top:0px; z-index:-1; }
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position(定位)网页定位</title>
<link rel="stylesheet" href="./css/index.css">
<style>
div {
text-align: left;
text-indent: 6rem;
color: black;
width: 400px;
height: 400px;
font-size: 22px;
text-align: left;
margin: 1.25px;
}
.div1 {
position: relative;
}
.div2 {
position: absolute;
right: 10%;
top: 0%;
}
.div3 {
position: fixed;
right: 10%;
}
.div4 {
position: sticky;
top: 100px;
left: 100px;
right: 100px;
bottom: 100px;
background-color: green;
}
.div5 {
width: 200px;
height: 9000px;
}
div:nth-of-type(odd) {
/* order: 2; */
background-color: #89FF9F;
}
div:nth-of-type(even) {
/* order: 2; */
background-color: #A0C7FE;
}
b {
color: red;
}
strong{
color:blueviolet;
}
</style>
</head>
<body>
<div class="div1">相对定位：参照物为 <b> 父元素</b>，未设置参照物，自动参照html，多数为 <b> 被参照物。 <br> <strong> 不脱离文档流</strong></b></div>
<div class="div2">绝对定位：<b>最近的父元素</b>为参照物，定位的元素可以重叠，，一般多用于元素边边角角的装饰，和网页宠物 <br> <strong> 脱离文档流</strong></div>
<div class="div3">固定定位：参照浏览器的html，<b>固定在网页上</b>，不会随着网页滚动而移动，<b>脱离文档流</b>，不占用网页的内容。 多用于回到顶部，多功能按键等等 <br> <strong> 脱离文档流</strong></div>
<div class="div4">粘性定位：基于 <b>用户的滚动位置</b>
来定位，粘性定位在 <b> 相对定位</b>
和<b>固定定位</b>
之间来回切换 <p>
鼠标滚动时本身<b>超出父元素</b>
之后切换成<b>固定定位</b>
，不超过则是<b>相对定位</b>
</p>比如某东的官网搜索框，下拉的时候自动归于最上方，
返回的时候再回去，他不仅占用<b>文档流</b>
，还占用<b>固定定位的文档流。</b> <br>
<strong> 不超过父元素范围时：不脱离文档流
超过父元素范围时：脱离文档流
</strong>
</div>
<div class="div5">测试粘性定位</div>
</body>
</html>
这篇html5css3教程———CSS Position(定位)网页定位，文章就结束了，有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作，谢谢观看，祝您生活愉快。
2023-12-04 11:10
文章点击量：
作者：【前端大G】
文章标签：
HTML,教程,CSS,Position,定位,网页,Pos
