欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

CSS里的两种定位方式：绝对定位与相对定位详解

最编程 2024-07-28 07:37:12
...

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站 点击跳转浏览。


1，理解绝对定位和相对定位


要理解定位你要先理解文档流，在文档流中相对定位的元素占有位置，而且会影响后面的元素（块元素、行内块元素），比如两个div并排，另外一个会换行。


<div>111</div>
<div>222</div>


而绝对定位就是把该元素从文档流中踢出，不会占用文档流的位置，也不会影响后面的元素。


<div style="position: absolute;">111</div>
<div>222</div>


如上面的实例，111和222会重叠，审查元素你会发现222有实际位置，111没有位置。他是使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位，如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义 。
网页布局涉及到各种设备各种分辨率下的兼容，所以就注定绝对定位不能适用于大部分场景。。所以布局只能依赖于上级元素的位置，而不能依赖于设备的高度和宽度。

适合绝对定位的场景主要是一些页面辅助功能


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


2，什么时候用


实际上很少单独用到绝对定位，因为分辨率或窗口大小一旦改变，绝对定位的东西就有可能会移动位置影响设计效果，你是无法确定所有人的分辨率都和你制作页面使用的分辨率是一样的。

所以：通常都是相对定位的父元素里面嵌套一个或多个绝对定位的子元素，这用就能避免分辨率和窗口大小的改变而影响设计效果。


3，实际应用（子绝父相）


子绝父相是什么呢？

子级是绝对定位的话，父级要用相对定位。

1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子 。

2.子盒子的运动范围必须在父盒子里面移动，因此此时父盒子需要加定位（相对或绝对或固定定位）。

3.因为父盒子需要占有位置，放子盒子能浮在上面，因此父盒子应该是相对定位。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #father{
        width: 300px;
        height: 300px;
        background-color: coral;
        position: relative;
        border: solid 3px red;
      }
      
      #son1{
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        left: 20px;
        top: 50px;
      }
      
      #son2{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        position: absolute;
        left: 40px;
        top: 90px;
      }
    </style>
  </head>
  <body>
    
    <div id="father">
      I am father
    </div>
    
    <div id="son1">
      I am son1
    </div>
    
    <div id="son2">
      I am son2
    </div>
    
  </body>
</html>


子级绝对定位，不会占有位置，可以放到父盒子的任何地方

参考https://blog.****.net/fighting_dream/article/details/113102281


上一篇： 如何在CSS中实现元素的水平和垂直居中对齐方法探索

下一篇： 玩转CSS布局③：绝对定位、跟随定位（基于父元素）与固定定位（无父元素依赖）

推荐阅读