定位（如何运用定位）

最新推荐文章于 2023-03-22 17:29:05 发布

呆码王子

最新推荐文章于 2023-03-22 17:29:05 发布

阅读量163

点赞数 1

分类专栏： HTML 文章标签： css3 前端 css Powered by 金山文档

本文链接：https://blog.csdn.net/L123456llljdjdbd/article/details/129389989

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

定义：

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

作用：

通过position属性设置定位

可选值：

static 默认值，没有开启定位

开启定位：

relative 开启相对定位

absolute 开启绝对定位

fixed 开启固定定位

sticky 开启粘滞定位

relative 开启相对定位

特点

a:开启相对定位之后，如果不配合偏移量使用，元素是没有任何变化

b:相对定位的原点，就是元素原来在文档流中的位置

c:开启相对定位后，元素的层级提高了

d:开启相对定位，元素的性质不会发生改变，块还是块，行内还是行内，

也就是说元素没有脱离文档流

偏移量

偏移量：

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

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

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

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

一般情况下，水平方向的偏移量，垂直方向的偏移量，只用一个值确定，不会同时使用两个值，容易出问题

<!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: 400px;
        /* right: 50px; */
        top: 200px;
        /* bottom: 200px; */
        /* top: -100px; */
      }

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

      .s1 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: relative;
        left: 100px;
        bottom: 50px;
      }
    </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: absolute; 开启绝对定位

特点

开启之后特点：

a:开启绝对定位后，元素就会脱离文档流

b:开启绝对定位后，元素的性质就发生了改变，不再区分块，行内块，行内元素

c:开启绝对定位，元素的层级也会提高

d:绝对定位，如果要元素的位置发生改变，依然需要配合偏移量去使用

e:绝对定位的原点：相对于其包含块来定位的

一般情况下，我们给子元素设置绝对定位，同时也会给父元素设置相对定位，

叫“子绝父相”，但具体情况具体看

包含块：

（1）、在没有定位的情况下，包含块就是离当前元素最近的祖先元素

（2）、有定位的情况，包含块是离它最近的，开启了定位的祖先元素；

如果他的祖先元素都没有开启定位，包含块就是根元素（html），又叫初始包含块

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
        margin: 50px;
        position: relative;
      }
   
      .box1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;
        right: 0;
        bottom: 0;
     
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>