css定位及方式

最新推荐文章于 2024-04-09 10:14:35 发布

认真学习的宋小姐

最新推荐文章于 2024-04-09 10:14:35 发布

阅读量211

点赞数

分类专栏：笔记文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_51946936/article/details/120618029

版权

在这里插入图片描述

一、定位

目标：能够说出定位的常见应用场景，并且能够说出不同定位方式的特点
在这里插入图片描述

定位的常见应用场景是什么？

解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上
可以让盒子始终固定在屏幕中的某个位置

在这里插入图片描述

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 300px;
            height: 300px;
        }
        .red{
            background-color: red;
        }
        .blue{
            /* 设置定位方式 */
            position: absolute;
            /* 设置偏移值 */
            top: 150px;
            left: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>

效果图
在这里插入图片描述

 .green{
            /* 设置定位发展 */
            position: relative;
            top: 100px;
            left: 100px;
            background-color: green;
        }

相对自己移动
在这里插入图片描述

<style>
    * {
   
      margin: 0;
      padding: 0;
    }

    div {
   
      width: 300px;
      height: 300px;
    }

    .red {
   
      background-color: red;
    }

    .green {
   
      /* 1、定位方式-绝对定位 */
      position: absolute;

      /* 2、偏移值 */
      top: 100px;
      left: 100px;

      background-color: green;
    }

    .blue {
   
      background-color: blue;
    }

  </style>
</head>
<body>
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</body>
</html>

在这里插入图片描述

<style>
    .father {
   
      /* 设置定位 */
      position: relative;

      width: 600px;
      height: 600px;
      background-color: pink;
    }

    .son {
   
      /* 设置定位 */
      position: relative;

      width: 400px;
      height: 400px;
      background-color: skyblue;
    }

    .sun {
   
      /* 绝对定位 */
      position: absolute;
      right: 0;
      bottom: 0;

      width: 200px;
      height: 200px;
      background-color: blue;
    }

  </style>
</head>
<body>
  <div class="father">
    <div class="son">
      <div class="sun"></div>
    </div>
  </div>
</body>
</html>

在这里插入图片描述

<style>
    .father {
   
      /* 父相 */
      position: relative;

      /* 父绝 */
      /* position: absolute; */

      width: 600px;
      height: 600px;
      background-color: pink;
    }

    .son {
   
      /* 子绝 */
      position: absolute;
      right: 0;
      bottom: 0;

      width: 400px;
      height: 400px;
      background-color: blue;
    }
  </style

最低0.47元/天解锁文章

认真学习的宋小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css定位及方式

一、定位目标：能够说出定位的常见应用场景，并且能够说出不同定位方式的特点定位的常见应用场景是什么？解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上可以让盒子始终固定在屏幕中的某个位置 <style> *{ margin: 0; padding: 0; } div { width: 300px; h.
复制链接

扫一扫