这篇博客详细介绍了CSS中的Position属性，包括static、fixed、relative、absolute和sticky五种定位方式。static是默认定位，fixed定位元素相对浏览器窗口，relative定位允许元素相对于其正常位置移动，absolute定位相对于最近已定位父元素，而sticky则在用户滚动时在relative和fixed之间切换。此外，还提到了重叠元素和z-index的重要性。
一、定义
position属性指定了元素的定位类型
position 属性的五个值：
- static
- relative
- fixed
- absolute
- sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
二、static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象
三、fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础知识-定位position</title>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>S
最低0.47元/天 解锁文章
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
