CSS入门篇12.相对单位与绝对定位

最新推荐文章于 2023-05-24 22:16:01 发布

大白菜·

最新推荐文章于 2023-05-24 22:16:01 发布

阅读量146

点赞数 2

文章标签： css html 前端 javascript java

本文链接：https://blog.csdn.net/m0_62404129/article/details/126525275

版权

相对定位：

定位从两个方面来掌握，

一个方面是如何开启，

另一个方面，开启定位后，它的特点是什么

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

你可以将任何元素，摆放在页面的任意位置

可以用position来设置定位

可选值：

static 默认值，不开启定位

以下四种定位方式，都属于开启了定位

relative 相对定位

absolute 绝对定位

fix 固定定位

sticky 粘滞定位

偏移量

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

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

top 相对于定位位置，顶部的偏移量

bottom 相对于定位位置，底部的偏移量

position：relative 开启了相对定位

1、如果不设置偏移量，元素的位置是不发生任何变化

2、设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置（left：0；top：0）

3、设置相对定位后，元素的性质是不发生变化

4、设置相对定位后，元素的层级会提高

5、设置相对定位后，元素是不会脱离文档流

演示代码为：

<!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: 100px;
        height: 100px;
        background-color: red;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        /* 开启了相对定位 */
        /* position:relative; */
        /* 偏移量  
        left   相对于定位位置，左侧的偏移量
        right  相对于定位位置，右侧的偏移量
        top    相对于定位位置，顶部的偏移量
        bottom   相对于定位位置，底部的偏移量
        
        */
        /* left: 50px; */
        /* bottom: 50px; */
        /* bottom: 100px; */

      }

      .box3 {
        width: 100px;
        height: 100px;
        background-color: green;
      }
    </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>

当box2不开启相对定位时，效果为：

当box2开启相对定位时，向右移50px，向上移50px，效果为：

绝对定位：

开启绝对定位

position: absolute;

绝对定位后的特点

1、设置绝对定位后，元素会脱离文档流

2、设置绝对定位后，元素的性质就会发生变化，就不会再区分块还是行内了

3、设置绝对定位后，如果不设置偏移量，元素的位置也不会发生变化

4、绝对定位，它的原点是相对于其包含块来定位的

5、设置绝对定位后，元素的层级也会提高

注意：一般情况下，为了更好的控制子元素的位置，

我们会在开启子元素的绝对定位后，会同步开启父元素的相对定位

这叫"子绝父相"

-->

<!-- 包含块

1、默认情况（没有定位的情况下），包含块就是元素的祖先元素

2、如果是定位的情况下，包含块就是元素的开启了定位的，离它最近的祖先元素

如果祖先元素都没有开启定位，则包含块就是根标签（html）

当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

1.开启绝对定位，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3.绝对定位是相对于离他最近的包含块定位的

（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质，开启BFC属性

内联元素变成行内块元素，

块元素的宽度和高度默认都被内容撑开

包含块：containing block

-正常情况下：

离当前元素最近的祖先块元素

-定位情况下：

离他最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

html （根元素，初始包含块）

代码演示为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
        /* position: relative; */
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: orange;
          /*绝对定位 */
        position: absolute;
        right: 0px;
        bottom: 0px;
      }
      .box2 {
        width: 250px;
        height: 250px;
        background-color: red;
      }
      .box3{
        width: 300px;
        height: 300px;
        background-color: pink;
        margin-left: 200px;
        margin-top: 100px;
        overflow: hidden;
        /* position: relative; */
      }
      .box4{
        width: 250px;
        height: 250px;
        background-color: purple;
        margin-left: 20px;
        margin-top: 20px;
        /* position: relative; */
      }
    </style>
   
  </head>
  <body>
    <div class="outer">
      <div class="box3">
        <div class="box4">
          <div class="box1"></div>
        </div>
      </div>
      <!-- <div class="box2"></div> -->
    </div>
  </body>
</html>

当box1未开启绝对定位时，效果为：

当box1开启绝对定位时，以浏览器为参照物，设以右下角为参照物，效果为：

大白菜·

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS入门篇12.相对单位与绝对定位

2、设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置（left：0；2、如果是定位的情况下，包含块就是元素的开启了定位的，离它最近的祖先元素。（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）我们会在开启子元素的绝对定位后，会同步开启父元素的相对定位。3、设置绝对定位后，如果不设置偏移量，元素的位置也不会发生变化。2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化。另一个方面，开启定位后，它的特点是什么。4、绝对定位，它的原点是相对于其包含块来定位的。
复制链接

扫一扫