定位类型
定位元素 当一个元素被定位时，它在页面上的位置是使用偏移属性确定的：顶部、右侧、底部和左侧。
偏移属性不适用于静态元素。
相对定位的元素位置值是“相对的”。
top 和 bottom 属性指定从其正常位置的垂直偏移，left 和 right 属性指定水平偏移。
绝对定位元素的位置值为“绝对”或者“固定”。
top、right、bottom 和 left 属性指定元素包含块边缘的偏移量。
粘性定位元素的位置值为“粘性”。
它被视为“相对”和“固定”元素的混合。
| 初始值 | static |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS2. |
| DOM 语法 | Object.Style.Position =“sticky”; |
position 属性指定元素在文档中的位置。
此属性具有以下值：
- static
- fixed
- absolute
- relative
- sticky
语法
position: static | absolute | fixed | relative | sticky | initial | inherit;
位置属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
position: absolute;
left: 40px;
top: 120px;
}
</style>
</head>
<body>
<h2>Position 属性示例</h2>
<p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
</p>
</body>
</html>
具有所有值的位置属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#box1 {
position: static;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box2 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box3 {
position: relative;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box4 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box5 {
position: absolute;
border: 2px solid #666;
width: 320px;
height: 100px;
top: 750px;
right: 25px;
}
#box6 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box7 {
position: fixed;
border: 2px solid #8ebf42;
background-color: #eee;
width: 300px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
}
#box8 {
position: absolute;
border: 2px solid #666;
top: 70px;
right: 15px;
}
</style>
</head>
<body>
<h2>Position 属性示例</h2>
<h3>Position: static</h3>
<p>
Box1 元素保留在页面的自然流中，不会充当绝对定位的 Box2 元素的锚点：
</p>
<div id="box1">
Box1: position: static.
<div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: relative</h3>
<p>
Box3 元素保留在页面的自然流中，并且还充当绝对定位的 Box4 元素的锚点：
</p>
<div id="box3">
Box3: position: relative.
<div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: absolute</h3>
<p>
Box5 元素不会保留在页面的自然流中。 它根据最近定位的祖先定位自己，并作为绝对定位的 Box6 元素的锚点：
</p>
<div id="box5">
Box5: position: absolute, top: 750px, right: 15px.
<div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: fixed</h3>
<p>
Box7 元素不会留在页面的自然流中，而是根据视口定位自己，并充当绝对定位的 Box8 元素的锚点：
</p>
<div id="box7">
Box7: position: fixed, bottom: 0, left: 0, right: 0.
<div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
</div>
</body>
</html>
在给定的示例中，我们包含所有值以显示差异：
具有“粘性”值的位置属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul {
height: 150px;
overflow: auto;
position: relative;
background-color: #cccccc;
padding: 0;
}
ul li {
list-style-type: none;
height: 30px;
padding: 10px 10px 0;
}
ul li:first-child {
position: -webkit-sticky;
position: sticky;
top: 1px;
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Example of the position property with the "sticky" value:</h2>
<ul>
<li>Sticky List Item</li>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
</ul>
</body>
</html>
CSS position 属性值说明
| 值 | 描述 |
|---|---|
| static | 根据文档的正常流量放置元素。这是此属性的默认值。 |
| absolute | 从文档流中移除元件，并相对于其定位的祖先元件定位。 |
| fixed | 元素从文档流中删除，并相对于浏览器窗口定位。 |
| relative | 元素相对于正常位置放置。 |
| sticky | 元素根据文档的正常流定位，然后相对于其最近的滚动祖先和包含块偏移。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:44 来源：oir作者：oir