css position

最新推荐文章于 2023-11-21 17:38:00 发布

huskyui

最新推荐文章于 2023-11-21 17:38:00 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/qq_32296307/article/details/80100822

版权

/**
   static
   relative  相对布局
      相对的是自己原来所在的位置
      依然占有自己原来的位置
   absolute  绝度布局
      会脱离文档流
      当父元素进行了定位时，相对的是父元素的位置
      若父元素没有进行定位，相对的是body元素
   fixed     固定布局
      会脱离文档流
      相对于窗口进行定位

*/

下面主要研究absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .father{
            width: 300px;
            height:200px;
            background-color: blue;
            /*position: relative;*/
        }
        .son{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class = "son"></div>
    </div>
</body>
</html>

可以发现，这个class son，在father下面，son的position为absolute，但是father没有写，所以，son的width：100%，height：100%会布满整个body。
但是，将father里面的position改为relative，son的width：100%，height：100%就会只布满father这个width：300px，height：200px；

huskyui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css position

/** static relative 相对布局相对的是自己原来所在的位置依然占有自己原来的位置 absolute 绝度布局会脱离文档流当父元素进行了定位时，相对的是父元素的位置若父元素没有进行定位，相对的是body元素 fixed 固定布局会脱离文档流相对于窗口进...
复制链接

扫一扫