`

相对定位 绝对定位

    博客分类:
  • HTML
 
阅读更多

相对定位:如果对一个元素相对定位的话,然后,可以通过设置垂直或水平位置,让这个元素相对于它的本身进行移动。属性并没有脱离文档流的,所以元素本身所占的位置会保留。。因此,移动元素会导致它覆盖其它框。(相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。)

例子:

<html>
<head>
<style type="text/css">
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>
</body>
</html>

 效果:

绝对定位:绝对定位使元素的位置与文档流无关,因此不占据空间。绝对定位是对最近的已定位祖先元素,如果不存在已定位的祖先元素,那么是对最初的包含块。

例子:

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
</body>
</html>

 效果图:

通过绝对定位,元素可以放置到页面上的任何位置。上面的标题距离页面左侧 100px,距离页面顶部 150px。

文档流定义:html的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline)。不独占一行

如果要使用相对定位属性或是绝对定位属性,absolute+margin、float+relative、和relative+absolute。

 

 

  • 大小: 21.9 KB
  • 大小: 7.6 KB
分享到:
评论

相关推荐

    CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位

    CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的...

    css 相对定位 绝对定位 浮动 分析

    本篇文章将深入探讨相对定位、绝对定位以及浮动的概念,这些都是网页设计中不可或缺的技能。 **相对定位(Relative Positioning)** 相对定位是CSS定位的基础,它允许元素在不改变其在正常文档流中的位置的情况下...

    绝对定位和相对定位

    在网页设计和开发中,定位(Positioning)是布局的关键元素,主要分为两种类型:相对定位(Relative Positioning)和绝对定位(Absolute Positioning)。这两种定位方式都是CSS(层叠样式表,Cascading Style Sheets...

    第七讲 GPS绝对定位与相对定位

    第七讲 GPS绝对定位与相对定位

    css定位绝对相对定位

    ### CSS定位详解:绝对定位与相对定位 #### 相对定位(Relative Positioning) 相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...

    CSS网页布局教程:绝对定位和相对定位

    绝对定位和相对定位是两种常用的定位技术,它们在网页设计中扮演着至关重要的角色。本教程将深入探讨这两个概念,以及如何在实践中有效利用它们。 ### 绝对定位 绝对定位允许一个元素相对于其最近的非静态定位祖先...

    网页制作中层相对定位的实现方法

    绝对定位是指层相对于其最初位置或浏览器窗口的位置进行固定,而相对定位则是指层相对于其最近的非静态定位祖先元素的位置进行定位。 #### 实现方法 ### 1. 通过修改代码实现层相对定位的设置 在HTML文档中,层...

    HTML5&CSS3网页制作:相对定位.pptx

    在实际的网页设计中,相对定位常用于微调元素的位置,或者作为绝对定位的参照点。比如,有一个名为"相对定位2"的元素,我们可以这样设置它的相对定位: ```css position: relative; top: 50px; left: 150px; ``` 这...

    CSS和Js演示网页绝对定位与相对定位,这些是我们从事前端编程的基础技能,应该学会的东西,这个小示例会告诉你绝对与相对的区别,以及如何去实现他们

    其中,理解并运用绝对定位和相对定位是基础技能之一,它们能够帮助开发者精确控制页面元素的位置,从而实现复杂且响应式的布局设计。 ### 绝对定位与相对定位的概念 1. **绝对定位(Absolute Positioning)**:当...

    div中的相对定位与绝对定位.pdf

    本文主要讨论的是CSS中的两种定位方式:相对定位和绝对定位,特别是在`div`元素中的应用。 1. 相对定位(relative) 相对定位允许元素相对于其原本在正常文档流中的位置进行偏移。当对一个元素设置`position: ...

    GPS相对定位基本原理

    无论是基于测码伪距的绝对定位还是测相伪距的绝对定位,都会受到多种因素的影响,如卫星星历误差、接收机与卫星时钟同步差异、大气折射误差等,这些因素共同作用会导致定位精度降低。尽管这些误差可以通过某些方法...

    信捷XD系列,六轴标准程序,包含轴回零,相对定位,绝对定位, 手自动切换 ,电机参数计算,整个程序的模块都有,程序框架符合广大编

    信捷XD系列,六轴标准程序,包含轴回零,相对定位,绝对定位, 手自动切换 ,电机参数计算,整个程序的模块都有,程序框架符合广大编程人员思维,只要弄明白这个程序,一般的项目都不会无从下手,参照这个,做项目不再...

    GPS相对定位程序

    这种方法相较于传统GPS绝对定位,通过考虑两台接收机之间的相对关系,有效降低了误差,提高了定位的准确性。因此,在测绘工程、地质勘探、交通导航、农业监测等多种领域中,GPS相对定位程序都有其广泛的应用前景。 ...

    div中的相对定位与绝对定位.docx

    本篇文章主要探讨了`div`中的相对定位(`relative`)与绝对定位(`absolute`)的区别及其应用。 1. 相对定位(`position: relative;`) 相对定位保留了元素在正常文档流中的位置,元素的原始位置不会被改变,但它...

    divcss盒子之绝对定位和相对定位.docx

    定位主要包括静态定位、绝对定位和相对定位三种方式。 1. 静态定位(static):这是元素的默认定位方式,元素按照正常的文档流排列,不受left, right, top, bottom等属性的影响。 2. 绝对定位(absolute):绝对...

    绝对定位+相对定位的妙用——一秒搞清子父级关系

    "绝对定位+相对定位的妙用"是CSS布局技术中的核心概念,它可以帮助我们精确控制网页元素的位置,实现复杂而精致的设计效果。下面将详细讲解这两种定位方式及其相互作用。 1. **相对定位(Relative Positioning)**...

    GPS绝对定位与相对定位PPT学习教案.pptx

    《GPS绝对定位与相对定位详解》 GPS全球定位系统(Global Positioning System)是现代科技的杰出成果,它通过接收卫星信号来确定地球上任何位置的精确坐标。本篇将深入探讨GPS的绝对定位与相对定位两种主要定位方式...

Global site tag (gtag.js) - Google Analytics