position relative怎么用
CSS中的position: relative;是一个相对定位的属性，它允许元素相对于其正常位置进行偏移，相对定位是CSS定位属性中最简单的一种，它不会影响到其他元素的位置，只是让元素相对于其原本的位置进行偏移，下面我们通过一些实例来详细介绍position: relative;的用法。
1、绝对定位与相对定位的叠加
当我们将一个元素设置为相对定位后，如果需要让它相对于另一个元素进行偏移，可以使用绝对定位，这时，相对定位和绝对定位会叠加在一起，形成一个新的参考点。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.box1 {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
在这个例子中，.box1和.box2都设置了绝对定位，它们的偏移是相对于.container元素的。.box1相对于.container的上边距为20px,左边距为20px;.box2相对于.container的上边距为50px,左边距为50px，这样，我们就实现了两个元素的相对偏移。
2、利用position: relative实现页面布局
在实际开发中，我们经常需要使用相对定位来实现页面的布局，我们可以创建一个导航栏，让其始终位于页面的顶部，并随着页面内容的滚动而滚动，这时，我们可以将导航栏的父元素设置为相对定位，然后将导航栏的内容设置为绝对定位，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.header {
position: relative;
height: 60px;
background-color: f8f8f8;
z-index: 100; /* 保证导航栏始终在内容上方 */
}
.nav-content {
padding: 10px;
z-index: 50; /* 保证内容始终在导航栏下方 */
}
</style>
</head>
<body>
<div class="header">
<div class="nav-content">这里是导航栏内容</div>
</div>
<div class="content">这里是页面主体内容</div>
<div class="footer">这里是页面底部</div>
</body>
</html>
在这个例子中，.header元素设置了相对定位，它的高度为60px。.nav-content元素设置了绝对定位，它的内边距为10px，这样，我们就实现了一个简单的导航栏布局，当页面内容滚动时，导航栏会始终保持在页面顶部，由于.nav-content元素的层叠顺序(z-index)低于.header元素，所以内容会始终显示在导航栏下方。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/315836.html
微信扫一扫 