css3 定位static、sticky、relative、.absolute和fixed

最新推荐文章于 2022-07-14 16:53:08 发布

MerryMe2020

最新推荐文章于 2022-07-14 16:53:08 发布

阅读量117

点赞数

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

本文链接：https://blog.csdn.net/jianjian_5201314/article/details/112615465

版权

css3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

body中代码如下

<body>
      <div id="box-1" class="box"></div>
      <div class="container">
          <div id="box-2" class="box"></div>
          <div id="box-3" class="box"></div>
      </div>
      <div id="box-4" class="box"></div>
      <div id="box-5" class="box"></div>
</body>

static

        #box-5 {
            /* 1.static默认定位方式 **/
            position: static;
            background: orange;
        }

sticky

        #box-5 {
           /** 2.sticky定位,一直停留在top为0的位置 **/
           /* position: sticky;*/
           /* top: 0;*/
            background: orange;
        }

relative

        #box-1 {
            /* 3.relative相对定位，相对于父级定位(body)**/
            position: relative;
            top: 50px;
            left: 50px;
            background: red;

        }

absolute

 .container {
            position: relative; /**使用相对定位**/
            width: 500px;
            height: 500px;
            background:#333 ;
            z-index: 2;

        }
        #box-2 {
            /** 4.absolute绝对定位 首先父级要有relative，然后相对于父级的容器进行定位。**/
            position: absolute;
            top: 100px;
            left: 100px;
            background: yellow;
        }
        #box-3 {
            /*  absolute绝对定位，绝对于父级(container)进行定位。*/
            position: absolute;
            bottom: 100px;
            right: 100px;
            background: green;
        }

fixed

        #box-4 {
            /*5.fixed固定定位,在页面中一直停留于某一个位置**/
            position: fixed;
            background: blue;
        }

MerryMe2020

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 定位static、sticky、relative、.absolute和fixed

body中代码如下<body> <div id="box-1" class="box"></div> <div class="container"> <div id="box-2" class="box"></div> <div id="box-3" class="box"></div> </div> &lt
复制链接

扫一扫

专栏目录