CSS学习日记：定位

比尔盖茨接班人班长

于 2022-11-28 20:57:33 发布

阅读量621

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/m0_56424512/article/details/128087107

版权

本文是关于CSS定位的学习笔记，涵盖了相对定位、绝对定位、固定定位和粘滞定位的概念及特点。相对定位不改变元素在文档流中的位置，但可以通过偏移量调整。绝对定位使元素脱离文档流，其位置基于最近的已定位祖先元素。固定定位使元素固定在屏幕某个位置，不受滚动影响。粘滞定位则在达到特定位置后固定，兼容性需注意。

摘要由CSDN通过智能技术生成

1.相对定位

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

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

通过position属性进行设置，

可选值：

static 默认值不开启定位

以下四种都属于开启定位

relative 开启相对定位

absolute 开启绝对定位

fixed 开启固定定位

sticky 开启粘滞定位

掌握定位：如何开启、开启后的特点

相对定位

使用position：relative；开启

特点：

1、开启了相对定位，如果不配合偏移量使用，元素不会发生任何变化

2、相对定位，是相对于元素原来在文档流中的位置定位

3、开启了相对定位后，元素的层级会变高，也就是会盖住其他的元素

4、开启了相对定位后，元素的性质不会发生变化，

也就是块还是块，行内还是行内

-->

<!-- 偏移量相对于定位位置挪动的大小的值

left 相对于定位位置左侧的偏移量

right 相对于定位位置右侧的偏移量

top 相对于定位位置上侧的偏移量

bottom 相对于定位位置下侧的偏移量

一般情况下，设置偏移量，

水平方向，left或right调动一个值

垂直方向，top或bottom调动一个值

-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 布局方式：文档流、浮动、定位、等等 -->
    <!-- 面试题：请你说一说定位的种类 -->

<!-- 定位：是一种布局手段，而且它是一种高级的布局手段，
      可以将页面中的任何元素放在页面中的任意位置 
     通过position属性进行设置，
       可选值：
          static    默认值   不开启定位

          以下四种都属于开启定位
          relative  开启相对定位
          absolute  开启绝对定位
          fixed     开启固定定位
          sticky    开启粘滞定位

    掌握定位：如何开启、开启后的特点
    
    相对定位
    使用position：relative；开启   
    特点：    
      1、开启了相对定位，如果不配合偏移量使用，元素不会发生任何变化
      2、相对定位，是相对于元素原来在文档流中的位置定位
      3、开启了相对定位后，元素的层级会变高，也就是会盖住其他的元素
      4、开启了相对定位后，元素的性质不会发生变化，
            也就是块还是块，行内还是行内
-->
<!-- 偏移量  相对于定位位置挪动的大小的值
       left   相对于定位位置左侧的偏移量
       right   相对于定位位置右侧的偏移量
       top    相对于定位位置上侧的偏移量
       bottom  相对于定位位置下侧的偏移量

       一般情况下，设置偏移量，
              水平方向，left或right调动一个值
              垂直方向，top或bottom调动一个值
-->
    <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>