相对定位

属性：position
值： relative
与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离

<style>
p.r{
  position: relative;
  left: 150px;
  top: 50px;
}

</style>

<p >正常文字1</p>
<p >正常文字2</p>
<p class="r" >相对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>

时间： 2024-10-14 19:39:53

相对定位的相关文章

div与 css--绝对定位和相对定位

<10-页面美化专题-div和css基础.avi> Border-topPadding-topMargin-topFloat Position #clear{Both:clear;}//浮动 float为了不影响后面的语句#son2{position:relative; //没有脱离文档流left:60%;} position :absolute;left:0px;绝对定位就脱离了文档子的绝对定位:要看爸爸是否有相对定位:如果有就相对爸爸的边框,如果没有就相对浏览器的定位了:

css 相对定位与绝对定位

相对定位的规律: 使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置. 使用相对定位的盒子仍在标准流中,它对父亲和兄弟盒子都没有任何影响. 绝对定位的规律: 使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移.如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位. 绝对定位的框从标准流中脱离,这意味它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样.

相对定位与绝对定位

相对定位(relative):对一个元素进行相对定位,它将出现在它所在的位置上,依据left,right,top,bottom等属性在正常文档流中偏移自身位置.,让元素相对于它的起点进行移动. 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间.因此,移动元素会导致它覆盖其它框. 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位. 绝对定位的元素的位置相对于最近

CSS 定位 (Positioning) CSS 外边距合并 CSS 相对定位

CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.显然,这个功能非常强大,也很让人吃惊.要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪. 另一方面

新接触的多几种定位方式（相对定位、绝对定位、固定地位和浮动）

本周学习了页面布局相关的东西,网页布局中,几种定位是我们经常用到的一个知识点,现在罗列一下目前接触到的剧中定位方式以及其具体解释: 1.relative(相对定位) 在static的基础上,让一个元素在他本来的位置做一些位移,可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right).有一点需要注意的是,相对定位的元素没有脱离文档流,仍然占据着他本来占据的位置空间. 2.absolute(绝对定位) 中将一个元素放至指定位置,可以使用absol

利用绝对定位和相对定位对CSS中区块进行位置调整

首先,我们需要明白相对定位和绝对定位的含义. 相对定位:就是设置一个参照物,其他元素或者区块相对于这个参照物进行偏移,而设置为相对定位的元素就是这个参照物. 绝对定位:绝对定位的偏移位置是相对于他的设置为相对定位的上级或者上上级,若这些都没有设置定位,则相对于BODY进行偏移,绝对定位不占位置. 以下是利用相对定位和绝对定位实现区块的位置调整,效果图如下: 代码如下: <!DOCTYPE html><html><head lang="en"> <

css 浮动相对定位绝对定位区别

今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然还得找人去做:不同的是,后台的就可以放心找人做,只要测试得没问题,效率还过得去就可以了,所以最近打算学好点前端,自己接一些单子来做.废话不多说,入正题: html是按照文件流(普通流)的方式加载的,但是全部是普通流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念. 一.首先

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div hr table 2.行内元素(内联元素) A:常见的=行内元素有 a span img input B:行内元素的特点 B.1 大小受到文字区域影响,不受width height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A: 行内元素转换成块级元素

常规流之相对定位（Relative positioning）

相对于后面会讲到的绝对定位,相对定位确实要简单的多.但是简单不代表不重要,今天就来说说它. 一.什么是相对定位一旦一个框按照常规流或者是浮动得到定位,它可以相对该位置进行偏移.这就叫做相对定位.这就是标准中对于相对定位的解释. 二.相对定位元素的一些特性 relative和absolute有一点很像,都能根据top.right.bottom和left属性进行偏移,但是这个偏移有所不同.absolute元素的偏移是相对于它的包含块来的,absolute的包含块在包含块那一章已经说过了,这里就不再

【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

引子: 开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕? 看下面的html代码: <body> <div id="father-body"> <div class="item1"></div> </div> </body> 实现方法一: html, body,#father-body{ height:100%; width:100%; background-color:#12