关于HTML定位的使用

最新推荐文章于 2023-11-03 16:16:04 发布

小白小菜鸟

最新推荐文章于 2023-11-03 16:16:04 发布

阅读量1.2k

点赞数 1

分类专栏： html 文章标签：大数据 html 前端

本文链接：https://blog.csdn.net/qq_59080175/article/details/125546836

版权

html 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在HTML里面为了页面的相对效果，可以使用定位来进行对盒子的位置进行改变

常见的定位有相对定位，绝对定位，固定定位，粘滞定位

文档流 margin 浮动定位

更加高级的布局手段

- 定位指的就是将指定的元素摆放到页面的任意位置

通过定位可以任意的摆放元素

- 通过position属性来设置元素的定位

-可选值：

static： ['stætik] 默认值，元素没有开启定位

relative： ['relətiv] 开启元素的相对定位

absolute： ['æbsəlju:t] 开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）

sticky： ['stiki] 开启元素的粘滞定位

相对定位：

当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型

1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）

3.相对定位的元素不会脱离文档流

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

5.相对定位不会改变元素的性质，块还是块，内联还是内联

偏移量

当开启了元素的定位（position属性值是一个非static的值）时，

可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动

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;
        /* float: left; */
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: relative;
        left: 100px;
        /* right: 100px; */
        /* bottom: 200px; */
        top:100p;
      }

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

      .s1 {
        /* width: 200px;
        height: 200px; */
        background-color: yellow;
        position: relative;
        bottom: 200px;
      }
    </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>

效果如下