css--position

CSS 定位

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

 

relative

相对定位

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。buttom如果为正数，则向上移动，right如果为正数，则向左移动

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            h2.pos_left
            {
            position:relative;
            left:-20px
            }
            h2.pos_right
            {
            position:relative;
                right:20px;
            }
            .pos_top{position: relative;
                bottom: 40px;
            }
        </style>
    </head>

    <body>
        <h2>这是位于正常位置的标题</h2>
        <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
        <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
        <h2 class="pos_top">这个标题</h2>
        <h2 class="pos_bottom">这个标题</h2>

    </body>

</html>
复制代码

 absolute

absolute绝对定位，相对于当前窗口的位置，有top，left，right，bottom

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .d1{width: 100px;height: 100px;background: red;
                position:absolute;
                left: 20px;
                top: 20px;
            }
        </style>
    </head>

    <body>
        <div class="d1"></div>

    </body>

</html>
点我
复制代码

上面的div元素距离左边20px，距离上边20px，如果我们想距离顶部20px；右边20px，怎么办呢？我们可以把那两个参数替换掉就可以了

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .d1{width: 100px;height: 100px;background: red;
                position:absolute;
                right: 20px;
                bottom: 20px;
            }
        </style>
    </head>

    <body>
        <div class="d1"></div>

    </body>

</html>
复制代码

这样是不是我们的div就固定在右下角了呢？如果内容过多会不会随着滚动条滚动？ 来动手测试一下

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .d1{width: 100px;height: 100px;background: red;
                position:absolute;
                right: 20px;
                bottom: 20px;
            }
            .d2{height: 4000px;}
        </style>
    </head>

    <body>
        <div class="d2">
            <div class="d1"></div>
        </div>

    </body>

</html>
View Code
复制代码

经过测试发现，会随着滚动条滚动，如果想要固定在某一个位置，就要用到fixed属性了

fixed

fixed固定定位，你想让它在哪个位置就在哪个位置，来，我们直接把上面的定位改为fixed试试

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .d1{width: 100px;height: 100px;background: red;
                position:fixed;
                right: 20px;
                bottom: 20px;
            }
            .d2{height: 4000px;}
        </style>
    </head>

    <body>
        <div class="d2">
            <div class="d1"></div>
        </div>

    </body>

</html>
复制代码

刷新看看，这样是不是就实现了我们的需求，想一想，其他网站右下角有一个回到顶部的按钮，我们一点就回到了顶部，其实就是用固定定位和js做的

inherit

inherit继承，继承父元素的定位

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .d1{width: 100px;height: 100px;background: red;
                position:inherit;
                right: 20px;
                bottom: 20px;
            }
            .d2{height: 4000px;}
            body{
                height: 4000px;}
        </style>
    </head>

    <body>
        <div class="d2">
            <div class="d1"></div>
        </div>

    </body>

</html>
复制代码

发现上面的代码和没设置position没什么区别，因为我们没有给它的父元素设置定位方式，我们给父元素加上定位方式在来看看

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .d1{width: 100px;height: 100px;background: red;
                position:inherit;
                left: 20px;
                top: 20px;
            }
            .d2{height: 100px;width: 100px;
                background: green   ;
                position: fixed;
                left: 100px;
                top: 100px;}
            body{
                height: 4000px;}
        </style>
    </head>

    <body>
        <div class="d2">
            <div class="d1"></div>
        </div>

    </body>

</html>
View Code
复制代码

代码解释：class="d1"的标签的定位方式为继承，而它的父元素class=d2的定位属性为固定定位fixed，所以也继承了固定定位

 

z-index

所有定位的方式都是有层级的，先写的定位的元素会被后写的定位的元素覆盖，例如上面继承的，红色的将绿色的覆盖掉了一点，如果要想让绿色的覆盖掉红色的，就要用到z-index了

z-index属性值有三个，分别为auto（默认值）、inherit（继承）、number（具体的数值）

z-index可以设置元素的叠加顺序，但依赖定位属性

z-index大的元素会覆盖掉z-index小的元素

z-index为auto的元素不参与层级比较

z-index被普通流中的元素覆盖

我们先来看一下不加z-index属性的效果

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .d2{height: 100px;width: 100px;
                background: green   ;
                position: absolute;
               }
            .d1{width: 100px;height: 100px;background: red;
                position:absolute;
                left: 20px;
                top: 20px;
            }
            body{
                height: 4000px;}
        </style>
    </head>

    <body>
        <div class="d2"></div>
        <div class="d1"></div>

    </body>

</html>
复制代码

发现红色的把绿色的遮挡住了，那我们给绿色的加上z-index

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .d2{height: 100px;width: 100px;
                background: green   ;
                position: absolute;
                z-index: 1;
               }
            .d1{width: 100px;height: 100px;background: red;
                position:absolute;
                left: 20px;
                top: 20px;
            }
            body{
                height: 4000px;}
        </style>
    </head>

    <body>
        <div class="d2"></div>
        <div class="d1"></div>

    </body>

</html>
View Code
复制代码

因为默认的z-index为0，当我们给绿色的设置为z-index为1的时候，绿色的就在上面了

 

posted @   邹邹很busy。  阅读(162)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示

目录导航