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

    2018-12-26 23:10:58
    -relative:开启元素的相对定位 -absolute:开启元素的绝对定位 -fixed:开启元素的固定定位(也是绝对定位的一种) 当元素的position属性设置为relative时,则开启了元素的相对定位: 1.当开启了元素的相对...

    position设置元素定位

    - 通过position属性来设置元素的定位
    	-可选值:
    	-static:默认值,元素没有开启定位
    	-relative:开启元素的相对定位
    	-absolute:开启元素的绝对定位
     	-fixed:开启元素的固定定位(也是绝对定位的一种)
    

    当元素的position属性设置为relative时,则开启了元素的相对定位

    • 1.当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
    • 2.相对定位是相对于元素在文档流中原来的位置进行定位
    • 3.相对定位的元素不会脱离文档流
    • 4.相对定位会使元素提升一个层级
    • 5.相对定位不会改变元素的性质,块还是块,内联还是内联

    当开启了元素的定位(position属性值是一个非static的值时,可以通过left right top bottom四个属性来设置元素的偏移量

    • left:元素相对于其定位位置的左侧偏移量
    • right:元素相对于其定位位置的右侧偏移量
    • top:元素相对于其定位位置的上边的偏移量
    • bottom:元素相对于其定位位置下边的偏移量
    • 通常偏移量只需要使用两个就可以对一个元素进行定位,一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

    相对定位代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>相对定位</title>
    	<style type="text/css">
    		.box1{
    			height: 200px;
    			background-color: red;
    			position: relative;
    		}
    		.box2{
    			width: 200px;
    			height: 200px;
    			background-color: yellow;
    			position: relative;
    			left: 100px;
    			top: 200px;
    		}
    		.box3{
    			width: 200px;
    			height: 200px;
    			background-color: yellowgreen;
    		}
    
    		.s1{
    			position: relative;
    			width: 200px;
    			height: 200px;
    			background-color: yellow;
    		}
    	</style>
    </head>
    <body>
    	<div class="box1"></div>
    	<div class="box2"></div>
    	<div class="box3"></div>
    
    	<span class="s1">我是一个span</span>
    </body>
    </html>
    
    展开全文
  • 定位 绝对定位与相对定位 定位 定位是一种高级的布局手段 通过定位可以将元素摆放到页面的任意位置 使用position属性来设置定位 偏移量 当元素开启了定位以后,可以通过偏移量来设置元素的位置 例如:top:...

    定位

           定位是一种高级的布局手段 
           通过定位可以将元素摆放到页面的任意位置 
           使用position属性来设置定位
    

    偏移量

         当元素开启了定位以后,可以通过偏移量来设置元素的位置
         例如:top:100px ;    bottom :xxpx ;     left、right
         注意:            
    

    相对定位

    relative
    
    1. 相对定位的参照元素是其本身在文档流中的位置进行定位
    2. 相对定位会提升元素的层级 但是不会使其脱离文档流 不会改变元素的性质,即块元素还是块元素,行元素还是行元素

    绝对定位

    absolute
    
    1. 开启绝对定位后,元素会从文档流中脱离
    2. 绝对定位会改变元素的性质,行变成块,块的宽高被内容撑开
    3. 绝对定位会使元素提升一个层级
    4. 绝对定位元素是相对于其包含块进行定位的
      包含块: 包含块就是离当前元素最近的祖先块元素
      绝对定位的包含块:就是离它最近的开启了定位的祖先元素,如果所有的祖先元素都没有开启定位则根元素就是他的包含快{ 即html}

    粘滞定位(新出 兼容性不好)

    sticky
    
    1. 与相对定位差不多
    2. 不同的是粘滞定位可以在元素到达某个位置时将其固定

    固定定位

     fixed
    
    1. 固定定位也是一种绝对定位
    2. 与绝对定位不同的是固定定位的参照物是浏览器的视口
    3. 固定定位的元素不会随网页的滚动条滚动
    展开全文
  • 相对定位

    (以下所有内容仅用以记录学习过程中的个人理解,如有错误欢迎指出)

    1. 静态定位static

    CSS的定位主要有四种:

    1. 静态定位;
    2. 相对定位;
    3. 绝对定位;
    4. 固定定位。

    定位可用属性有:

    1. top;
    2. bottom;
    3. left;
    4. right;
    5. z-index。

    其中静态定位是默认的定位方式,不能使用以上定位属性,而后三种定位方式可以使用。

    2. 相对定位relative

    代码如下设置,开启相对定位:

    position: relative;
    

    相对定位是以原来的位置为参照,通过设置top、bottom、left、right等属性,确定元素在文档流中的移动方向和距离。

    未设置偏移量之前,元素位置不会发生变化。

    同时,相对定位会使元素上升一个层级,且并不会改变元素的块/内联性质。

    #div1{
        width:200px;
        height:200px;
        border:3px red solid;
        
        position:relative;
        left:100px;
        top:100px;
    }
    
    <div id='div1'></div>
    

    代码如上,效果如下图,方框从蓝色原位置相对定位到红色现位置:
    方框从蓝色原位置偏移到红色现位置

    3. 绝对定位absolute

    代码如下设置,开启绝对定位:

    position: absolute;
    

    绝对定位是以与它最近的开启定位的祖先元素为参照,通过设置top、bottom、left、right等属性,确定脱离了文档流的元素的移动方向和距离。

    未设置偏移量之前,元素位置不会发生变化。

    同时,绝对定位会使元素上升一个层级,但会改变元素的块/内联性质。

    #div2{
        width:200px;
        height:200px;
        border:3px red solid;
        
        position:absolute;
        left:100px;
        top:100px;
    }
    
    <div id='div2'></div>
    

    代码如上,效果如下图,方框相对蓝色坐标轴绝对定位到红色现位置:
    方框绝对定位到红色现位置

    4. 固定定位fixed

    代码如下设置,开启固定定位:

    position: fixed;
    

    固定定位是以浏览窗口本身为参照,特点基本与绝对定位相同。

    固定定位,不会随滚动条滚动。

    想想网页经常跳出来的一些不会滚动的小广告,那就是固定定位了。

    展开全文
  • CSS相对定位绝对定位

    2021-01-29 18:56:43
    定位属性 position absolute 绝对定位 一共有四个属性值 top/right/bottom/left position:absolute; top:20px; 注意:绝对定位脱离文档流,如果没有父级的话,绝对定位的参考点是页面的左上角。...相对定位与绝对定位结

    定位属性 position

    absolute 绝对定位 一共有四个属性值 top/right/bottom/left

    position:absolute;
    top:20px;
    注意:绝对定位脱离文档流,如果没有父级的话,绝对定位的参考点是页面的左上角。如果有父级而且父级有定位属性,
    绝对定位的参考点就是他的父级。同理,如果父级没有定位属性,就查找他的爷爷级.....
    

    relative 相对定位
    注意:相对定位不会脱离文档流,他的位置仍然在原来的位置。相对定位的参考点是他原来的位置

    相对定位与绝对定位结合使用
    通常情况下,在对元素设置绝对定位的时候,不想让其相对于页面发生偏移,则会选其最合适的祖元素设置为相对定位。
    

    static 静态定位(默认值)

    fixed 绑定定位 与绝对定位的特性基本一致,但差别是始终相对整个文档进行定位;

    设置透明度 opacity:0~1

    z-index的空间位置
    概念:z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    //元素可拥有负的 z-index 属性值。 z-index:-1;
    //Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
    

    overflow 溢出的处理方式

    hidden   设置超出部分隐藏 父子集div,给父级添加overflow:hidden ,子集可直接margin-top
    	
    scroll   设置超出部分出现滚动条
    visible  设置超出部分显示(默认值)
    auto     设置自适应显示滚动条以便查看其余的内容。
    
    展开全文
  • 定位: 定位是一种更加高级的布局手段。 通过定位可以将元素放到... relation 开启元素的相对定位。 absolute 开启元素的绝对定位。 fixed 开启元素的固定定位。 sticky 开启元素的粘滞定位。 相对定位: ...
  • 绝对定位和相对定位

    2019-12-25 09:38:00
    1.相对定位 通过相对定位来控制网页中元素的位置 语法:position:relative 参照点:自身原来的位置 1.1相对定位 position:relative 设置相对定位后 可以设置top bottom left right 对盒子进行位置上的调整 常用的...
  • 详解微信小程序 相对定位和绝对定位 相对定位:元素是相对自身进行定位,参照物是自己。 绝对定位:元素是相对离它最近的一个已定位的父级元素进行定位 相对定位:  position:relative; /*启用相对定位*/  ...
  • 相对定位与绝对定位

    2020-03-26 10:18:38
    定位分为:相对定位,绝对定位,固定定位。 1、相对定位:relative 相对定位是相对于自己进行定位。即相对自身进行位置变动,如: <div></div> div{ width: 100px; height: 100px; background-color...
  • 1.为什么需要定位? 标准流和浮动 , 难以实现一下情况 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子。 当我们滚动窗口时吗,盒子是固定屏幕某个位置的 ... 相对定位 abso...
  • 绝对定位与相对定位

    2019-12-30 20:33:29
    需要有参照元素,参照被设为相对定位或绝对定位的标签,若是没有设定参照标签,就会参照body。 相对定位:主要是给绝对定位设置参照物,绝对定位和相对定位经常搭配使用。 使用相对定位与绝对定位之后可以达到让...
  • css定位中有相对定位和绝对定位,那么css相对定位和绝对定位之间有什么不同呢?接下来的这篇文章将给大家分别介绍关于css相对定位和绝对定位的内容以及css相对定位和绝对定位的区别。 一、首先我们来看一看css相对...
  • 相对定位绝对定位

    2016-07-28 11:07:23
    如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动...
  • 定位、相对定位、绝对定位

    千次阅读 2020-07-04 22:43:30
    relative:生成相对定位元素,所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。 absolute: 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了...
  • 这里向大家描述一下CSS绝对定位和相对定位的区别CSS绝对定位使你能精确地定位要素在页面的独立位置而CSS相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位 本文向大家重点讨论一下 CSS绝对定位...
  • 相对定位(position:relative) 特点:在使用相对定位时,就算元素被偏移了,但是他仍然占据着没偏移前前的位置, 绝对定位(position:absolute) 相对于最近的一个具有定位属性的父包含块进行绝对定位,如果没有...
  • 相对定位和绝对定位

    2019-09-10 10:34:32
    有两种不同的定位模式 静态定位为默认值,不能设置偏移量 相对定位 绝对定位若父级元素没有定位则对准浏览器
  • 相对定位 position:relative 1 相对于自己原来的位置进行定位 2 如果只加了相对定位,没有加具体的位置,那么,对这个元素没什么影响 3 配合left,right,top,bottom使用 4 提升层级 z-index 只用在加了定位的元素上 ...
  • 1.相对定位相对定位就是相对于自己以前在标准流中的位置来移动。 1.1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间 1.2在相对定位中同一个方向上的定位属性只能使用一个 1.3由于相对定位是不脱离...
  • CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 流...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,391
精华内容 6,156
关键字:

相对定位