CSS的简单学习（6）

最新推荐文章于 2024-04-25 14:04:07 发布

VIP文章 wqksoul

最新推荐文章于 2024-04-25 14:04:07 发布

阅读量376

点赞数

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/wqksoul/article/details/128084921

版权

1相对定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box {
        width: 600px;
        height: 600px;
        border: 5px solid rgb(56, 56, 56);
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        /* 开启相对定位 */
        position: relative;
        left: 100px;
        /* right: 150px;
        top: 100px;
        right: 100px; */
      
      }

      .box3 {
        width: 200px;
        height: 200px;
        background-color: green;
      }

      .s1 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: relative;
        left: 100px;
        top: -100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <span class="s1">我是一个span</span>
    </div>
  </body>
</html>

布局方式：文档流、浮动、定位、等等 -->

面试题：请你说一说定位的种类 -->

定位：是一种布局手段，而且它是一种高级的布局手段，

可以将页面中的任何元素放在页面中的任意位置

通过position属性进行设置，

可选值：

static 默认值不开启定位

以下四种都属于开启定位

relative 开启相对定位

absolute 开启绝对定位

fixed 开启固定定位

sticky 开启粘滞定位