css position属性（ static relative absolute fixed）

最新推荐文章于 2024-07-24 20:44:42 发布

置顶周达

最新推荐文章于 2024-07-24 20:44:42 发布

阅读量1.2k

点赞数 1

分类专栏： css 文章标签： css position

本文链接：https://blog.csdn.net/gis_zhouda/article/details/79805311

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

position属性有4种不同类型的定位，分别是static、relative、absolute和fixed。

static:元素正常生成，块级元素作为文档流的一部分，从上到下依次排列，行内元素对应生成一个或者多个行框。这是一种正常的情况，不再赘述。

relative:元素的形状保持不变，位置会相对于其起点，做一定的偏移。

<html>
<head>
<style type="text/css">
h2.pos_relative
{
position:relative;
left:20px;
top:20px
}
</style>
</head>
<body>
<h2>正常位置的标题</h2>
<h2 class="pos_relative">这个标题相对于其正常位置向右移动20px,向下移动20px</h2>
</body>
</html>

"left:20px",元素的左侧相对于其原始位置增加20px;"top:20px",元素的顶部相对于其原始位置增加20px;

效果如下：

absolute:元素的位置相对于最近的已定位的父元素进行定位，元素不占据文档流中的空间，可以覆盖界面上的其他元素，可以通过z-index属性来控制元素的显示次序。

<html>
<head>
<style type="text/css">
h2.pos_absolute
{
position:absolute;
left:50px;
top:50px
}
</style>
</head>
<body>
<h2>这是正常的标题</h2>
<h2 class="pos_absolute">这是带有绝对定位的标题</h2>
</body>
</html>

"left:50px",元素的左侧相对于其父元素body增加50px;"top:50px",元素的顶部相对于其父元素body增加50px;

效果如下：

fixed:元素的位置相对于其视窗进行定位，而不是相对于最近的已定位的父元素，这一点与absolute不同。

<html>
<head>
<style type="text/css">
h2.one
{
position:fixed;
left:20px;
top:10px;
}
h2.two
{
position:fixed;
top:30px;
right:50px;
}
</style>
</head>
<body>
<h2 class="one">相对于视窗左侧增加20px,相对于视窗顶部增加10px</h2>
<h2 class="two">相对于视窗右侧增加50px,相对于视窗顶部增加20px</h2>
</body>
</html>

效果如下：

周达

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css position属性（ static relative absolute fixed）

position属性有4种不同类型的定位，分别是static、relative、absolute和fixed。 static:元素正常生成，块级元素作为文档流的一部分，从上到下依次排列，行内元素对应生成一个或者多个行框。这是一种正常的情况，不再赘述。 relative:元素的形状保持不变，位置会相对于其起点，做一定的偏移。&lt;html&gt;&lt;h...
复制链接

扫一扫

专栏目录