CSS-定位(Position)
学习自
Overview
CSS中HTML元素存在以下之后定位选项
| Position | Desc |
|---|---|
| static | html 元素的默认的定位方式(即没有定位)，元素正常出现在文档流中 |
| fixed | 相对于浏览器窗口是固定的 |
| relative | 相对于自己的定位 |
| absolute | 相对于父布局进行定位 |
| sticky | 粘性定位, 相当于 relative 和 fixed 的结合体 |
static
HTML 元素的 默认 值，即没有定位，元素正常出现在文档流中，此定位方式不会受到 top right .. 的影响。
fixed
元素的位置相对于浏览器窗口是固定的。
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Study Html</title>
<style>
h2 {
100%;
border-left-style: solid;
border-left- 5px;
border-left-color: cornflowerblue;
background-color: beige;
position: fixed;
}
</style>
</head>
<body>
<h2>This is a Fixed H2</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<!-- .... -->
</ul>
</body>
</html>
relative
relative 定位是相对其 正常 的位置.
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Study Html</title>
<style>
h2 {
border-left: 5px solid coral;
background-color: aliceblue
}
h2.positive-left {
position: relative;
left: 20px;
}
h2.negative-left {
position: relative;
left: -20px;
}
</style>
</head>
<h2>This is a common normal H2!</h2>
<h2 class="positive-left">This is a left=20px H2!</h2>
<h2 class="negative-left">This is a left=-20px H2!</h2>
<body>
</body>
</html>
absolute
absolute 定位方式相对的是父布局，如果没有父布局，那么相对的是 html 节点。
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Study Html</title>
<style>
h2 {
border-left: 5px solid coral;
background-color: aliceblue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<h2>This is a common normal H2!</h2>
<p>绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html</p>
<body>
</body>
</html>
sticky
sticky 是粘性定位，这种定位方式相当于 relative 和 fixed 定位方式的结合体。
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Study Html</title>
<style>
h2 {
position: sticky;
left: 10px;
top: 0PX;
border-left: 5px solid lightblue;
background-color: antiquewhite;
100%;
}
</style>
</head>
<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<h2>翻滚吧，牛宝宝！</h2>
<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<!-- ..... -->
<body>
</body>
</html>
重叠的元素
元素的定位与文档流无关，所以他们可以覆盖页面上的其他的元素，z-index 属性确定了哪个元素在上面，哪个元素在下面。
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Study Html</title>
<style>
img {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
</style>
</head>
<p>测试文本测试文本测试文本测试文本测试文本测试......</p>
<img src="./imgs/dog.png" />
<body>
</body>
</html>