css属性之定位

最新推荐文章于 2024-09-24 15:04:24 发布

骑着毛驴的小猴子

最新推荐文章于 2024-09-24 15:04:24 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_31765427/article/details/74500644

css 专栏收录该内容

14 篇文章

订阅专栏

相对定位：position:relative;
参考物：相对于自己原始位置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 300px;
                height:100px;
                border:1px solid #0000FF;
            }
            div:nth-of-type(1){
                float: left;
                border-color:red;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
    </body>
</html>

如上代码，为了使观察更加直观，写了两个大小一样，且让第一个div浮动起来，脱离文档流，然后相对定位第二个div
这里写图片描述

绝对定位：position:absolute;
参考物：参考距离其最近、并且定位的祖先元素
若无定位的祖先元素，则参考窗口
这里写图片描述

固定定位：position:fixed;
参考物：窗口。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width:200px;
                height:200px;
                border:1px solid red;
                position:fixed;
                top:100px;
                right:100px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />

    </body>
</html>

在以上代码中，写了几行br，是更好地证明fixed定位就仅仅是相对于窗口定位，滑动滚动条，位置不变。
这里写图片描述

定位作用：
居中、制作自适应网页、固定的导航等。。。
top\right\left\bottom\z-index都只对定位元素有用。

应用：
1、自适应上下居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 300px;
                height: 300px;
                border:1px solid red;
                position: relative;
            }
            .box>div{
                width:100px;
                height:100px;
                border:1px solid blue;
                position:absolute;
                top:0;
                left: 0;
                right: 0;
                bottom: 0;
                margin:auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>
</html>

这里写图片描述
2、元素不给定宽高，自适应满屏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                position: absolute;
                top:0;
                left: 0;
                right: 0;
                bottom: 0;
                background: deepskyblue;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

这里写图片描述