HTML中的定位 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        body{
            height: 10000px;
        }
        div{
            width: 100px;
            height: 100px;

        }
        #guDing{
            background: lightblue;
            position: fixed;
            left: 500px;
            top: 200px;
        }
        #xiangDui{
            background: lightpink;
            position: relative;     /*相对定位不会脱离原先的文档流*/
            left: 100px;
            top: 100px;
            
        }
        #jueDui{
            background: lightgreen;
            position: absolute;   
            left: 100px;
            top: 100px;
            
        }
    </style>

</head>
<body>
    <div id="guDing"></div>
    <div id="xiangDui"></div>
    <div id="jueDui"></div>
    <!-- 定位
    1.相对定位：相对于原本的位置（依然会占据原来的空间）8像素
    2.绝对定位：相对于离他最近的已定位父级定位（html）已定位（该父级没定位就往上一层一层找）
    3.固定定位：相对于浏览器定位

     -->
</body>
</html>

相对定位：

页面效果如下

1.相对定位：相对于原本的位置（依然会占据原来的空间）8像素
如果不加
position: relative;

效果如下

 

但是有8px的间距

 

 

检查如下

 

如图所示 8px是固定的Margin造成的

 

 

绝对定位

页面效果如下

 

2.绝对定位：相对于离他最近的已定位父级定位（html）已定位（该父级没定位就往上一层一层找）
绝对路径此时div jueDui离他最近的父元素是body
但是body没有进行定位
那就
一层一层的往上找
最后是根据浏览器绝对定位

而div jueDui  和  div xiangDui 为什么不重合呢？

解释如下
如图

如图所示 8px是固定的Margin造成的

所以不重合

   相对定位不会脱离原先的文档流      只要不默认margin为0 相对定位会一直多出8px

  

固定定位

代码如下

  #guDing{
            background: lightblue;
            position: fixed;
            left: 200px;
            top: 200px;
        }
  3.固定定位：相对于浏览器定位

页面效果如下

 

 

 

 

 

 

posted @ 2021-11-04 22:09  doudou帅  阅读(431)  评论(0)    收藏  举报