精华内容
下载资源
问答
  • 绝对定位

    千次阅读 2018-12-27 11:33:21
    当position属性值设置为absolute时,则开启了元素的绝对定位 绝对定位: 1.开启绝对定位,会使元素脱离文档流 2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化 3.绝对定位是相对于离他最近的...
    当position属性值设置为absolute时,则开启了元素的绝对定位		
    
    绝对定位:
    	1.开启绝对定位,会使元素脱离文档流
    	2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
    	3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位,都会同时开启父元素的相对定位)如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
    	4.绝对定位会使元素提升一个层级
    	5.绝对定位会改变元素的性质:
    		内联元素变成块元素,块元素的宽度和高度默认都被内容撑开
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>绝对定位</title>
    	<style type="text/css">
    		.box1{
    			width: 200px;
    			height: 200px;
    			background-color: red;
    		}
    		.box2{
    			width: 200px;
    			height: 200px;
    			background-color: yellow;
    			position: absolute;
    			/*left: 100px;
    			top: 100px;*/
    		}
    		.box3{
    			width: 300px;
    			height: 300px;
    			background-color: yellowgreen;
    		}
    		.box4{
    			width: 300px;
    			height: 300px;
    			background-color: orange;
    			/*开启box4的相对定位*/
    			/*position: relative;*/
    		}
    		.s1{
    			width: 100px;
    			height: 100px;
    			background-color: yellow;
    			/*开启绝对定位*/
    			position: absolute;
    		}
    	</style>
    </head>
    <body>
    	<div class="box1"></div>
    	<div class="box5">
    		<div class="box4">
    			<div class="box2"></div>
    		</div>
    	</div>
    	<div class="box3"></div>
    
    	<span class="s1">我是一个span</span>
    </body>
    </html>
    
    展开全文
  • 昨天晚上写了个页面,感觉自己对相对定位和绝对定位还是有没有弄清楚的地方,所以今天还是来总结一下。 1、首先看两者的定义和区别 相对定位设置后是相对于它本身所在的文档流的位置进行定位,也就是相对于它原来...

    昨天晚上写了个页面,感觉自己对相对定位和绝对定位还是有没有弄清楚的地方,所以今天还是来总结一下。

    1、首先看两者的定义和区别

    相对定位设置后是相对于它本身所在的文档流的位置进行定位,也就是相对于它原来的位置而言

    绝对定位设置后就是相对于它的祖先节点中设置过相对定位的那块容器 ,来进行绝对定位如果祖先节点中没有设置 默认就是body标签。

    区别绝对定位会脱离文档流,文档中不保留其定位前的位置,相对定位不会脱离文档流,定位前的位置依然保留。

    2、什么时候用

    实际上很少单独用到绝对定位,因为分辨率或窗口大小一旦改变,绝对定位的东西就有可能会移动位置影响设计效果,你是无法确定所有人的分辨率都和你制作页面使用的分辨率是一样的。
    所以:通常都是相对定位的父元素里面嵌套一个或多个绝对定位的子元素,这用就能避免分辨率和窗口大小的改变而影响设计效果。

    展开全文
  •  如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位。这句话是错的。  正确的是:只要父级元素设了position并且不是static(默认既是static),那么设定了absolute的子...

    【前言】

        经常看到一句话,css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))

     

     

    【总结】

       如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位。这句话是错的。

        正确的是:只要父级元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的)。

        绝对定位(Absolute positioning)元素定位的参照物是其包含块,既相对于其包含块进行定位,不一定是其父元素。

    .

    展开全文
  • 绝对定位和相对定位的区别 一、主bai体不同 1、相对定位:是设置为相对定位的元素框会偏移某个距离。 2、绝对定位:absolute 脱离文档流,通过 top,bottom,left,right 定位。 二、特点不同 1、相对定位:在使用相对...

    绝对定位和相对定位区别

    一、主bai体不同

    1、相对定位:是设置为相对定位的元素框会偏移某个距离。

    2、绝对定位:absolute 脱离文档流,通过 top,bottom,left,right 定位。

    二、特点不同

    1、相对定位:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

    2、绝对定位:选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。

    三、表现方式不同

    1、相对定位:对一个元素进行相对定位,它将出现在它所在的位置上。可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

    2、绝对定位:文本流中的内容会顶替绝对定位元素的位置,而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中,定位元素将会跑到网页的左上角,因为那里是被绝对定位后的坐标原点。

    展开全文
  • css 绝对定位和相对定位

    千次阅读 多人点赞 2018-11-10 20:36:07
    绝对定位 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占据空间。 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已...
  • 绝对定位 absolute不占位置完全浮动,相对定位 relative会占有位置。 绝对定位是根据其定位不是static的祖先 元素来定位的 所以我们在使用时通常设置父元素相对定位(有两个目的,其一是要让父元素占位置,其二是为了...
  • 前端——css相对定位,绝对定位,固定定位

    千次阅读 多人点赞 2019-02-03 21:23:41
    绝对定位参考点单独盒子绝对定位参考点:父辈元素设置了相对定位,则子元素绝对定位以父辈元素为参考点。绝对定位水平居中固定定位参考点 相对定位 position: relative; &lt;style type="text/css"&...
  • html相对定位和绝对定位

    万次阅读 多人点赞 2018-07-02 18:14:24
    绝对定位:该元素相对于其父元素,偏移一定距离。相对的是父元素,重点是这个父元素也需要是设置了position属性。从最近的父元素开始找,直到找到body位置为止。   1)相对定位 &lt;div id="test&...
  • CSS相对定位和绝对定位详解

    万次阅读 多人点赞 2017-08-25 10:33:03
    相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置。相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种: 值 描述 absolute 使元素绝对定位,相对于static定位以外的最近的...
  • (1)绝对定位(position:absolute) ①相对于已经定位的父级元素去定位 ②若父级元素未定位,则相对于HTML根文档定位 ③完全脱离文档流,不占有位置 ④通过left top bottom right定位 (2)相对定位...
  • 绝对定位与相对定位

    千次阅读 2017-07-16 20:11:16
    绝对定位和相对定位可以决定这个东西所在的位面。如果穿越了位面,那么就只能在另外的位面生活,而不能回来。他的子孙后代也只能在另外的位面生活。如果他没有穿越位面,他的子孙基因突变穿越了位面,那么子孙就脱离...
  • 定位有三种,分别是相对定位、绝对定位、固定定位。 相对定位: position:relative; 绝对定位: position:absolute; 固定定位: position:fixed; 相对定位 相对定位,就是微调元素位置的。让...
  • 定位、相对定位、绝对定位

    千次阅读 2020-07-04 22:43:30
    absolute: 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。 fixed: 生成固定定位...
  • 相对定位,绝对定位

    千次阅读 2015-01-30 16:11:36
    绝对定位是相对于父标签决定位置,一般用于相对定位标签里面,JS特效经常用到。 相对定位是相对于上一个相对定位的。一般用于浮动定位标签里面,一般跟绝对定位配合使用。 浮动定位才是常用的。 看例子: ...
  • CSS之绝对定位与相对定位的区别

    万次阅读 2018-08-05 15:54:22
    一:绝对定位 position: absolute 绝对定位绝对定位是相对于元素最近的已定位的祖先元素,如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(也就是body)。 绝对定位本身与文档流无关,因此...
  • 求相对定位和绝对定位的使用情景,最近写了个网页,内容特别容易错乱 怀疑是不是相对定位和绝对定位用的不恰当
  • CSS中的静态定位 固定定位 绝对定位和相对定位
  • 绝对定位 固定定位 关于浮动绝对定位相对定位的总结 定位不定位 position:static; 相对定位 position:relative; 激活属性top bottom left right 位移参考于原本的位置 特性 不会脱离文档流 对元素本身没有影响 如果...
  • 当添加一个HTML元素,不设置定位方式默认为静态定位(position:static),静态定位属于文档流(排列方式就像文本,一行一行排列,文字多出会换行)。 相对定位 相对定位(position:relative)是相对于自己之前的...
  • 什么时候用相对定位或绝对定位

    千次阅读 2017-09-11 20:54:24
    绝对定位就是把该元素从文档流中踢出,不会占用文档流的位置,也不会影响后面的元素。 111 222 如上面的实例,111和222会重叠,审查元素你会发现222有实际位置,111没有位置。他是使用left,right,top,bo
  • 2、绝对定位的元素脱离文档流,偏移不影响文档流中的其它元素,Left; Right; Top和Bottom属性与margin属性混合使用,偏移方向相同值累加,方向相反,margin属性值无效。 3、绝对定位的元素以最近的定位祖先元素为...
  • 绝对定位和相对定位的研究

    千次阅读 2018-05-02 18:10:58
    绝对定位和相对定位的研究 现象: 研究jsp页面元素的绝对定位、相对定位、静态定位 定位属性: 首先看下 position 属性的设置 static :无特殊定位 relative:相对定位 absolute:绝对定位 一:静态定位...
  • 前端固定定位,相对定位和绝对定位之间的关系 固定定位: 固定定位的位置是 相对当前浏览器窗口 的 根据浏览器进行偏移,并不根据父容器是绝对定位还是相对定位。固定定位和相对定位很像,固定定位是依据浏览器进行...
  • css中绝对定位和相对定位

    千次阅读 2014-09-13 09:58:54
     层级关系为: 效果图: 为改变参照物(橘色框)后的效果 ...仅使用margin属性布局绝对定位元素的情况 此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素
  • 小程序UI——相对定位和绝对定位

    千次阅读 2018-06-26 15:31:48
    一、理解相对定位和绝对定位①相对定位的元素是相对自身进行定位,参照物是自己②绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位二、相对定位、绝对定位的编码实战position:relative 开启相对路径模式...
  • 相对定位和绝对定位

    2013-03-30 20:50:48
     从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(absolute),固定(fixed),相对定位(relative)。最常用也是最实用的两个定位方法:绝对定位(absolute)、相对定位(relative)。  ...
  • 一、定位定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素,通过position属性来设置元素的定位 可选值: static:默认值,元素没有开启定位 relative:开启元素的相对定位 ...
  • 微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位:relative position:...
  • 绝对定位 Position:absolute;特点:★元素使用绝对定位之后不占据原来的位置(脱标)★元素使用绝对定位,位置是从浏览器出发。★嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。★...
  • CSS 定位 (Positioning) 属性允许你对元素进行定位。 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。 position 属性值的含义: static 没有定位,元素出现在正常的流中top, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 256,261
精华内容 102,504
关键字:

属于绝对定位的是什么