简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

CSS中position属性详解

怪我咯
发布： 2017-06-22 09:16:17
原创
1916 人浏览过

CSS中position属性是设定元素的定位类型，它有absolute（绝对定位）、relative（相对定位）、static（静态定位，默认值）、fixed（固定定位）四种参数。

  • static：默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。

  • relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。

  • absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。

  • fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

示例

使用position属性定位

元素，代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>
登录后复制


以上是CSS中position属性详解的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
css position
来源：php.cn
上一篇：CSS样式-如何清除元素浮动？ 下一篇：CSS position属性有什么用
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
将如何在styled components中使用map函数来处理数据？ 我正在练习如何使用map函数。我创建了一个json文件，希望使用map函数显示每个数据。数据传递得很好。但问题是显示图像的方式。图像都在一个文件中，显示图像的方式是使用backgr...
来自于 2024-03-30 18:06:00
0
1
378
如何使用react-chartjs-2.js 将文本放入圆环图中？ 当图表的标题位于顶部且标签位于圆环图右侧时，如何使用react-chartjs-2.js和Typescript将文本放入圆环图中。到目前为止我找到的解决方案似乎不适用于侧面的标签或...
来自于 2024-03-30 15:14:29
0
1
371
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！