admin管理员组文章数量:1612098
文章目录
- 相对定位：relative
- 绝对定位：absolute
- 固定定位：fixed
- 粘性定位：sticky
- 设置定位元素的层级：z-index
- position属性用于指定一个元素在文档中的定位方式。
- top，right，bottom 和 left 属性则决定了该元素的最终位置。
语法：
position：static/absolute/relative/fixed/sticky；
说明：
- static（默认值）：
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。忽略任何top、bottom、left、right声明 - absolute（绝对定位）：
相对于父级元素的绝对定位，浮出、脱离文档流，不占据空间，就是我们所说的层，其位置相对于最近的以定位父元素而言的位置，若父元素都没有定位，则以HTML（根元素）进行定位参考 - relative（相对定位）：
相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其开始的位置发生位置上的移动，不会破坏正常的布局流 - fixed（固定定位）：
相对于浏览器的绝对定位，不占位，是相对于浏览器窗口的指定坐标进行定位。不管窗口滚动与否，元素都会留在那个位置。无法和relative配合使用 - sticky（粘性定位）：
相对于可视窗口定位，元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置
相对定位：relative
- 相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。
- 下面的例子中，注意未应用定位的其它元素是按照 “Two” 在正常位置的情况下进行布局的。
- 示例：相对自身定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
</style>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
</body>
</html>
绝对定位：absolute
- 相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。
- 在布置文档流中其它元素时，绝对定位元素不占据空间。
- 绝对定位元素相对于最近的非 static 祖先元素（上一级设置定位的元素）定位。
- 当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。
- 默认状态下，html就是一个大的包含块，所有绝对定位的元素都是根据窗口来定位自己所处的位置
- 示例：相对初始包含块定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#one {
margin-left: 50px;
}
#two {
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 0px;
background: blue;
}
</style>
<body>
<div class="box" id="one">
One
<div class="box" id="two">Two</div>
</div>
</body>
</html>
- 示例：相对已定位元素定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
/* 已设置定位的祖先元素 */
#one {
position: relative;
margin-left: 50px;
}
#two {
position: absolute;
width: 50px;
height: 50px;
top: 20px;
left: 20px;
background: blue;
}
</style>
<body>
<div class="box" id="one">
One
<div class="box" id="two">Two</div>
</div>
</body>
</html>
固定定位：fixed
- 固定定位与绝对定位相似，但元素的包含块为 viewport 视口。
- 该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: fixed;
width: 50px;
height: 50px;
top: 0px;
right: 0px;
background: blue;
}
</style>
<body>
<div class="box" id="two">Two</div>
</body>
</html>
页面滚动时，位置相对于可视窗口保持不变
- 示例：让一个元素始终在窗口水平、垂直位置居中
/*方法一*/
div{
width:200px;
height:200px;
background:red;
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
/*方法二*/
div{
width:200px;
height:200px;
background:red;
position:fixed;
left:50%;
top:50%;
margin-top:-100px;
/*相对于减自身高度的一半，找高度的中心点*/
margin-left:-100px;
/*相对于减自身宽度的一半，找宽度的中心点*/
}
粘性定位：sticky
- 粘性定位可以被认为是相对定位和固定定位的混合。
- 元素在跨越特定阈值前为相对定位，之后为固定定位。
- 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。
- 否则其行为与相对定位相同
#one { position: sticky; top: 10px; }
/*
在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。
之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下
*/
- 示例：改变可视窗口的长度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#one {
margin-left: 50px;
}
#two {
display: block;
width: 50px;
height: 50px;
position: sticky;
bottom: 0px;
background: blue;
}
</style>
<body>
<div class="box" id="one">
One
</div>
<div class="box" id="two">Two</div>
</body>
</html>
设置定位元素的层级：z-index
- z-index 属性设置元素的堆叠顺序。
- 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
- 语法：
{
z-index：auto | number；
}
- 参数说明：
- auto： 默认值
- number： 无单位的整数值，可为负数，数值越大，层越靠上
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div {
margin-left: 100px;
width: 50px;
height: 75px;
background: pink;
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
<body>
<section>
<h1>z-index 属性用法</h1>
<div></div>
<p>z-index 默认值是 0，Z-index -1 拥有更低的优先级</p>
<script type="text/javascript">
</script>
</body>
</html>
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div {
margin-left: 100px;
width: 50px;
height: 75px;
background: pink;
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
<body>
<section>
<h1>z-index 属性用法</h1>
<div></div>
<p>z-index 默认值是 0，Z-index 1 拥有更高的优先级</p>
<script type="text/javascript">
</script>
</body>
</html>
说明：
- 较大数值的对象会覆盖在较小数值的对象之上。
- -如两个绝对定位的此属性值具有同样的number值，那么将根据他们在HTML文档中声明的顺序层叠。
- 此属性仅仅作用于position属性值为 relative 或 absolute 的对象。
版权声明：本文标题：【CSS】position 定位 和 z-index 层级 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1728603489a1165153.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论