【CSS】position:relative和position:absolute

摘要:
position:relative相对定位1.如何定位?设置了TRBL相对最近的设定了position:relative/absolute的父(祖先)节点的padding-box的区进行定位,找不到符合条件的父(祖先)节点,则相对浏览器窗口进行定位。先理解下上面示例代码的显示图,以及给自己元素加上position:absolute后的显示图。

position:relative相对定位

1. 如何定位?
每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认位置。(在父级节点的content-box区定位,父级节点有文字的话,元素的默认位置则是紧随文字)
2. 不会改变行内元素的display属性。
3. 并没有脱离普通流,只是视觉上发生的偏移。
代码——

复制代码
<body style='margin:0;padding:0;background:#BDD7EE;color:white;'>
<div   style='margin:10px;border:10px solid white;300px;background:#F8CBAD;padding:10px 0 0 10px;font-size:20px;font-weight:bold;'>
  <div   style='50px;height:50px;top:-10px;left:0px;'></div>
  <div   style='height:50px;color:#fff;'>position:relative定位测试</div>
</div>
</body>
复制代码

显示——

【CSS】position:relative和position:absolute第3张

给子元素one的style加上position:relative;后显示——

【CSS】position:relative和position:absolute第4张

给父级元素contain的style加上文字后显示——

【CSS】position:relative和position:absolute第5张

【CSS】position:relative和position:absolute第6张

将one由div节点改为span节点,并加入文字“你好”之后显示——

复制代码
<body style='margin:0;padding:0;background:#BDD7EE;color:white;'>
<div   style='margin:10px;border:10px solid white;300px;background:#F8CBAD;padding:10px 0 0 10px;font-size:20px;font-weight:bold;'>如果父级节点有文字的话...
  <span   style='50px;height:50px;position:relative;top:-10px;left:0px;'>你好</span>
  <div   style='height:50px;color:#fff;'>position:relative定位测试</div>
</div>
</body>
复制代码

【CSS】position:relative和position:absolute第9张

position:absolute绝对定位

1. 如何定位浮动?

  • 设置了TRBL
    相对最近的设定了position:relative/absolute的父(祖先)节点的padding-box的区进行定位(忽略文字),找不到符合条件的父(祖先)节点,则相对浏览器窗口进行定位。

  • 没有设置了TRBL
    则默认浮动,默认浮动在父级节点的content-box区。

2. 不管是块级元素还是行内元素,应用了position:absolute之后,display为block:

  • 可以设置width和height

  • 没有设置的话,width默认为auto

3. 脱离文档流,容器(父)元素将得不到脱离普通流的子元素高度

代码——

复制代码
<body style='margin:10px;300px;color:white;'>
<div style='padding-top:10px;'>祖先元素
  <div style='border:10px solid white;padding-top:10px;'>父级元素
    <div style=''>子元素</div>
  </div>
</div>
</body>
复制代码

显示----

【CSS】position:relative和position:absolute第12张

给子元素的style加上position:absolute;top:0px;left:0px;后显示——

【CSS】position:relative和position:absolute第13张

给子元素的style加上position:absolute;top:0px;后显示——

【CSS】position:relative和position:absolute第14张

注释:应用了position:absolute之后之设置了top,所以子元素的top紧贴浏览器窗口的top(距离为0px),因为没有设置left,所以子元素左边就默认父级元素content-box区的左侧进行定位(没应用position:absolute之前左侧该在哪个位置就在那个位置)
给子元素的style加上position:absolute;后显示——

【CSS】position:relative和position:absolute第15张

案例:理解应用了position:absolute的元素没有设置TRBL的话,则默认浮动在父级节点的content-box区

用一句通俗易懂的话来说就是,它该在哪个位置就在哪个位置,只不过不占位而已。
先理解下上面示例代码的显示图,以及给自己元素加上position:absolute后的显示图。

【CSS】position:relative和position:absolute第16张

给子元素的样式加上:display:inline;我们看看如果子元素是内联元素的话会如何显示。

【CSS】position:relative和position:absolute第17张

假如有两个同级块级元素,看看第一个子元素和第二个子元素分别应用position:absolute后的效果如何。

<div style='padding-top:10px;'>祖先元素
  <div style='border:10px solid white;padding-top:10px;'>父级元素
      <div style=''>子元素(上)</div>
      <div style=''>子元素(下)</div>
  </div>
</div>

【CSS】position:relative和position:absolute第18张

如果这两个同级块级元素都应用了position:absolute;这两个元素会进行重叠,子元素(下)显示在前面,那是因为默认代码靠后的元素的z-index比较大。

【CSS】position:relative和position:absolute第19张

上面的案例中,将第二个子级元素换为内联元素,子元素(下)的起点位置并没有改变。

【CSS】position:relative和position:absolute第20张

试试给代码中的第一个元素的style加上display:inline;看看上面的子元素是内联元素的话会如何显示。

<div style='padding-top:10px;'>祖先元素
  <div style='border:10px solid white;padding-top:10px;'>父级元素
      <div style='display:inline;'>子元素(上)</div>
      <div style=''>子元素(下)</div>
  </div>
</div>

【CSS】position:relative和position:absolute第21张

现在调换下应用position:absolute的位置

代码:

<div style='padding-top:10px;'>祖先元素
  <div style='border:10px solid white;padding-top:10px;'>父级元素
      <div style=''>子元素(上)</div>
      <div style=''>子元素(下)</div>
  </div>
</div>

【CSS】position:relative和position:absolute第22张

第一个子元素是内联元素的话——

<div style='padding-top:10px;'>祖先元素
  <div style='border:10px solid white;padding-top:10px;'>父级元素
      <div style='display:inline;'>子元素(上)</div>
      <div style=''>子元素(下)</div>
  </div>
</div>

【CSS】position:relative和position:absolute第23张

综上:不管是块级元素还是内联元素应用position:absolute并且不设置TRBL,它都会默认在父级元素的content-box区浮动。原来的起点位置也是应用绝对定位后的起点位置,只不过如果应用了position:absolute的内联元素左边也有内联元素的话,它的起点位置会变得更靠前,直到紧挨左边内联元素的边界。

综合案例:看看position:relative和position:absolute的综合效果

沿用position:absolute的案例代码——

复制代码
<body style='margin:10px;300px;color:white;'>
<div style='padding-top:10px;'>祖先元素
  <div style='border:10px solid white;padding-top:10px;'>父级元素
    <div style=''>子元素</div>
  </div>
</div>
</body>
复制代码

在上面代码的基础上分别应用以下的定位后看看效果,并理解。

【CSS】position:relative和position:absolute第26张

案例诊断:

    • 给祖先div加上"position:relative;"以及给子元素加上
      "position:absolute;top:0px;left:0px;"

【CSS】position:relative和position:absolute第27张

给父级div加上"position:relative;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

【CSS】position:relative和position:absolute第28张

给祖先和父级div加上"position:relative;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

【CSS】position:relative和position:absolute第29张

给祖先div加上"position:absolute;"以及给子元素加上

"position:absolute;top:0px;left:0px;"

【CSS】position:relative和position:absolute第30张

给父级div加上"position:absolute;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

【CSS】position:relative和position:absolute第31张

给祖先和父级div加上"position:absolute;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

【CSS】position:relative和position:absolute第32张

我们看到,确实是消除了环绕浮动元素环绕的影响,position:absolute的优先级高,所以float元素被遮住了,并不是消失了。另外看到contain元素的高度不受子元素的影响了,因为它们都脱离文档流了。

参考颜色

【CSS】position:relative和position:absolute第33张

应用:消除环绕浮动元素的影响

父级,position:relative(不设TRBL)
子级,第一个div的float:left;第二个div的position:absolute(不设TRBL)
因为第二个子级div元素默认会在父级元素的content-box区浮动,它可以消除上一个同级子级div元素的环绕浮动影响。
案例代码——

<div   style='margin:10px;300px;background:#F8CBAD;padding:10px 0 10px;color:white;'>
  <div   style='30px;height:30px;float:left;'></div>
  <div   style='color:#fff;'>position:absolute消除浮动环绕的影响测试</div>
</div>

显示--

【CSS】position:relative和position:absolute第34张

给父级元素加上position:relative,给第二个子级元素加上position:absolute后,显示——

【CSS】position:relative和position:absolute第35张

转自:https://segmentfault.com/a/1190000006924181

免责声明:文章转载自《【CSS】position:relative和position:absolute》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇log4j配置文件位置详解Linux系统下安装JDK及环境配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

css图片+文字浮动(文字包围效果)

css图片+文字浮动(文字包围效果): 在网页中,我们有时想实现这个效果,但是 <div id="test"> <img src="gdimages/01.jpg" alt=""/>《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》是QST青软实训推出的“在实践中成长”系列丛书之...

webpack9--删除冗余的CSS

我们在写代码的时候可能有些CSS并没有用到,我们如何利用webpack将冗余的CSS清除掉呢? 可以使用purifycss-webpack达到该目的。 1.安装purifycss-webpack,glob 和 purify-css npm i purifycss-webpack glob purify-css -D 2.在配置文件中引入 purifycs...

css 文本超出以省略号显示 与 文本换行

使用css3实现文本超出省略号和多行省略号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...

IE浏览器没有加载CSS或js文件的秘密及解决办法

其实是两处资料拼成这一篇博文的,因为在开发过程中遇到,有的文章只是说明原因,而没有给出解决方案,所以再次给出解释和解决方法,以供参考,如果有好的解决方法,也请分享下! --------------------------------------------------------------写在前面的话 [IE浏览器没有加载CSS或js文件的秘密] 如果有...

基于CSS3的3D旋转效果

自从有了html5和css3,好多以前只能想想的华丽效果都可以上手实现了。3D 转换(个人认为3D变换更贴切^)就是其中之一。关于3D转换,可以阅读CSS3 3D transform变换,不过如此,文中对3D转换进行了形象、生动、详细的阐述。在这里,只和大家讨论怎么利用3D转换来实现立体及其旋转效果,例如: 好吧,废话不多说,上代码! 1.页面代码 1...

pure css简单组件,借鉴bootstrap

   <!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <!--缩放比例以及允许缩放--> <meta name="viewport" conte...