CSS定位
CSS的position属性指定了HTML元素的定位类型，元素可以使用top left right bottom的定位属性，但是前提是元素必须指定了position定位类型，它有五个值 static relative fixed absolute sticky，不同的定位互相有不同的定位类型。
- static：默认值，无定位，根据文档流定位。
- relative：相对定位，相对其正常位置定位。
- fixed：固定定位，相对于浏览器窗口定位。
- absolute：绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于文档流。
- lsticky：粘性定位，基于用户的滚动位置来定位。
static
static定位是默认定位（或静态定位）元素依次根据文档流渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
div{
position: static;
border: blue 2px solid;
}
</style>
</head>
<body>
<h1>position:static 或默认不写position属性元素不会有定位</h1>
<div>使用static静态定位的元素正常显示在文档流</div>
<p>这是一个正常定位的段落</p>
</body>
</html>
relative
relative相对定位的位置是相对其正常位置的定位，设置相对定位之后，后面正常显示的元素会被压在下面，也就是说设置相对定位的元素比没有设置定位的元素显示高一个层级，但它原本所占的空间不会改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
div{
position: relative;
left: 50px;
top: 50px;
border: blue 2px solid;
}
</style>
</head>
<body>
<h1>position:relative </h1>
<div>使用相对定位的元素会相对它正常出现的位置进行定位</div>
<p>这是一个正常定位的段落</p>
</body>
</html>
fixed
使用相对定位的元素相对于浏览器定位，即使窗口滚动也不会改变位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
div{
position: fixed;
left: 50px;
top: 50px;
border: blue 2px solid;
}
</style>
</head>
<body>
<h1>position:fixed </h1>
<div>使用固定定位的元素相对于浏览器窗口定位</div>
<p>这是一个正常定位的段落</p>
</body>
</html>
absolute
相对于最近的已定位父元素，如果元素没有已定位的父元素，就相对于根元素定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
.box{
position: absolute;
left: 50px;
top: 50px;
border: blue 2px solid;
}
</style>
</head>
<body>
<h1>position:absolute </h1>
<div style="position: fixed;top: 0;right: 0;background: aqua;height: 200px;width: 1000px;">
<div class="box">使用固定定位的元素会相对浏览器窗口进行定位，即使窗口滚动也不会改变其定位</div>
</div>
<p>这是一个正常定位的段落</p>
</body>
</html>
sticky
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
.box{
position: sticky;
left: 50px;
top: 50px;
border: blue 2px solid;
}
</style>
</head>
<body>
<h1>position:sticky </h1>
<div class="box">使用粘性定位的元素综合了相对定位和固定定位</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>这是一个正常定位的段落</p>
</body>
</html>
重叠的元素
设置了定位的元素（除static）显示层级会比没有定位的元素层级高，但会比指定正层级的元素低。
通过设置属性z-index改变元素所属的层级，属性值为整数（可负）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
.box{
position: absolute;
left: 50px;
top: 50px;
border: blue 2px solid;
}
</style>
</head>
<body>
<h1>position:absolute </h1>
<div style="z-index:100; background: aqua;height: 200px;width: 1000px;">
<div class="box">使用z-index指定元素显示层级</div>
</div>
<p>这是一个正常定位的段落</p>
</body>
</html>
通过z-index指定了元素的层级，并不会使元素脱离原文档流，但使用定位会。
网友评论