CSS相对定位详解【css教程】,CSS
作者：搜教程发布时间：2019-12-17分类：CSS教程浏览：46评论：0
导读：设置为相对定位的元素框从文档流完整删除，并相干于其包括块定位，包括块多是文档中的另一个元素或者是初始包括块。元素原先在一般文档流中所占的空间会封闭，就好像该元素本来不存...
设置为相对定位的元素框从文档流完整删除，并相干于其包括块定位，包括块多是文档中的另一个元素或者是初始包括块。
元素原先在一般文档流中所占的空间会封闭，就好像该元素本来不存在一样。元素定位后生成一个块级框，而不管本来它在一般流中生成何种范例的框。
CSS 相对定位 ( 引荐进修：CSS教程 )
相对定位使元素的位置与文档流无关，因而不占有空间。这一点与相对定位差别，相对定位实际上被看做普通流定位模子的一部分，由于元素的位置相干于它在普通流中的位置。
普通流中别的元素的规划就像相对定位的元素不存在一样：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
如下图所示：
CSS 相对定位实例
相对定位的元素的位置相干于近来的已定位先人元素，假如元素没有已定位的先人元素，那末它的位置相干于最初的包括块。
关于定位的重要问题是要记着每种定位的意义。所以，如今让我们温习一下学过的学问吧：相对定位是“相干于”元素在文档中的初始位置，而相对定位是“相干于”近来的已定位先人元素，假如不存在已定位的先人元素，那末“相干于”最初的包括块。
解释：依据用户代办的差别，最初的包括块多是画布或 HTML 元素。
提醒：由于相对定位的框与文档流无关，所以它们能够掩盖页面上的别的元素。能够经由过程设置 z-index 属性来掌握这些框的堆放序次。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有相对定位的标题</h2>
<p>经由过程相对定位，元素能够安排到页面上的任何位置。下面的标题间隔页面左边 100px，间隔页面顶部 150px。</p>
</body>
</html>
以上就是CSS相对定位详解的细致内容，更多请关注ki4网别的相干文章！
标签：CSS
相关推荐
- 纯 CSS 如何实现实现鼠标跟随效果？（代码详解）_html5教程,CSS,鼠标跟随
- 纯 CSS 如何实现实现鼠标跟随效果？（代码详解）_css教程,CSS,鼠标跟随
- CSS 实现拖拽改变布局大小_html5教程,CSS,左右拖拽,布局大小
- CSS 实现拖拽改变布局大小_css教程,CSS,左右拖拽,布局大小
- CSS Modules 详解_html5教程,CSS
- CSS Modules 详解_css教程,CSS
- 使用 CSS 实现一个简单的骨架屏（Skeleton Screen）_html5教程,CSS
- 使用CSS实现皮卡丘_html5教程,CSS
- CSS 中伪类的使用（干货）_html5教程,CSS
- 使用 CSS 实现一个简单的骨架屏（Skeleton Screen）_css教程,CSS
欢迎 你 发表评论:
- CSS教程排行
-
- 1伪元素“::after”和“::before”的作用分别是什么_css教程,伪元素,::after,::before
- 2详谈CSS的flex布局（图文介绍）_css教程,css,flex布局
- 3CSS3如何实现图片滚动播放效果（附代码）_css教程,css
- 4详解CSS3实现弹性布局的方式_css教程,CSS3,弹性布局,flexbox
- 5css优化策略介绍_css教程,css,优化策略
- 6两分钟带你了解在CSS中三种使图片居中的方法_css教程,css,图片居中
- 7手把手教你CSS如何实现毛玻璃效果_css教程,css
- 8css中标签嵌套规则有哪些_css教程,css,标签,嵌套规则
- 9如何使用CSS框架来加快设计过程？_css教程,CSS框架,设计
- 最新文章
- 广而告之
-
简数采集
腾讯云
宝塔系统
阿里云