css中float与几种定位的关系

最新推荐文章于 2024-08-28 15:21:08 发布

马学君

最新推荐文章于 2024-08-28 15:21:08 发布

阅读量557

点赞数

分类专栏： css 浮动与定位文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_43448394/article/details/84930138

版权

css 同时被 2 个专栏收录

3 篇文章

订阅专栏

浮动与定位

1 篇文章

订阅专栏

1，三种定位方式：relative,absolute,fixed.其中relative是相对于元素本身，absolute是相对于元素的第一个有定位的父级元素,fixed是相对于屏幕;
2,首先来解析第一个float与relative；

   <style>
        .parent{
            width:400px;
            height:300px;
            border:1px solid red;
        }
        .fl{
            float:left;
        }
        .item{
            width:100px;
            height:100%;
            border:1px solid  blue;
        }
        .child1{
            position: relative;
            top:0;
            left:0;
        }
    </style>
    <body>
    <div class="parent">
        <div class="child1 fl item"></div>
        <div class="child2 fl item"></div>
        <div class="child3 fl item"></div>
    </div>
</body>

然后如果child1元素既设置了浮动也设置了position:relative，
显示如图在这里插入图片描述
原因分析：child1元素既设置了float:left;又设置了position:relative，但是position:relative并不会覆盖float:left;它会使得浮动元素在浮动的位置上再相对定位;
3,float与absolute和fixed;

   <style>
        .parent{
            width:400px;
            height:300px;
            border:1px solid red;
            position: relative;
        }
        .fl{
            float:left;
        }
        .item{
            width:100px;
            height:100%;
            border:1px solid  blue;
        }
        .child1{
            position: absolute;
            top:0;
            left:0;
        }
        /*或者*/
         .child1{
            position: fixed;
            top:0;
            left:0;
        }
    </style>
    <body>
    <div class="parent">
        <div class="child1 fl item"></div>
        <div class="child2 fl item"></div>
        <div class="child3 fl item"></div>
    </div>
</body>

那么这时候生成的网页;
在这里插入图片描述
原因解析：当position为absolute或者fixed的时候,position定位会覆盖掉原来child1元素的float,使得浮动会失效,然后child2会移位到parent元素的最左边，与position:absolute定位元素item1相重叠