admin管理员组文章数量:1606664
目录
1、属性定义及使用说明
1.1、position属性
1.2、position属性值简介
2、Position 值详细介绍
2.1、static 定位
2.2.1、简介
2.2.2、代码
2.2.3、示例图
2.2、fixed 定位
2.2.1简介
2.2.2、代码
2.2.3、示例图片
2.3、relative 定位
2.3.1、简介
2.3.2、代码
2.3.3、示例图片
2.4、absolute定位
2.4.1、简介
2.4.2、代码
2.4.3、示例图片
2.5、sticky定位
2.5.1、简介
2.5.2、代码
2.5.3、示例图片
注意:
position absolute 绝对定位,可以设置外边距,且不含与其他边距合并
position relative 相对定位,在元素原的位置上根据设置的top、left修改
position fixed 固定位置,相对于当前窗口位置不变
position sticky 粘性定位
盒子模型中,子绝父相。父盒子相对定位状态,子盒子才可以绝对定位。
1、属性定义及使用说明
position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。
1.1、position属性
默认值: | static |
---|---|
继承: | no |
版本: | CSS2 |
JavaScript 语法: | object.style.position="absolute" |
1.2、position属性值简介
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
sticky | 粘性定位,该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
initial | 设置该属性为默认值,详情查看 CSS initial 关键字。 |
2、Position 值详细介绍
2.1、static 定位
2.2.1、简介
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
2.2.2、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>static</title>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素,无特殊定位,遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>
</body>
</html>
2.2.3、示例图
2.2、fixed 定位
2.2.1简介
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
2.2.2、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fixed</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>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>
2.2.3、示例图片
2.3、relative 定位
2.3.1、简介
相对定位元素的定位是相对其正常位置。
移动相对定位元素,但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
2.3.2、代码
(1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>relative</title>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>
<body>
<h2>这是一个没有定位的标题</h2>
<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
</body>
</html>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>relative</title>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
2.3.3、示例图片
(1)
(2)
2.4、absolute定位
2.4.1、简介
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素和其他元素重叠。
2.4.2、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>
2.4.3、示例图片
2.5、sticky定位
2.5.1、简介
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
2.5.2、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sticky</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
2.5.3、示例图片
版权声明:本文标题:CSS 中 position属性介绍 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728506107a1161448.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论