盒子的相对定位

最新推荐文章于 2024-10-13 23:17:00 发布

sususugaa

最新推荐文章于 2024-10-13 23:17:00 发布

阅读量758

点赞数 26

文章标签： html css 前端 visual studio

本文链接：https://blog.youkuaiyun.com/sususugaa/article/details/142896363

版权

一、定位属性

1.定位方式

position属性可以选择4种不同类型的定位方式，语法格式如下：

position:static | relative | absolute | fixed

static静态定位为默认值，为无特殊定位，对象遵循HTML定位规则。

relative生成相对定位的元素，相对于其正常位置进行定位。

absolute生成绝对位置元素，元素的位置通过left、top、right和bottom属性进行规定。

fixed生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left、top、right和bottom属性进行规定。

2.左、右、上、下位置

left:auto | length

right:auto | length

top：auto | length

bottom：auto | length

auto无特殊定位，根据HTML定位规则在文档流中分配。

length是由数字和单位标识符组成的长度值或百分数。

必须定义position属性值为absolute或者relative，此取值放个生效。

3.宽度

width:auto | length

auto无特殊定位，根据HTML定位规则在文档流中分配。

length是由数字和单位标识符组成的长度值或百分数，百分数是基于父对象的宽度，不能为负值。

4.高度

height:auto | length

参数同宽度一样。

5.最小高度（min-height）

min-height:auto | length

参数同宽度一样。

6.可见性（visibility）

visibility:inherit | visible | collapse | hidden

inherit继承上一个父对象的可见性。

visible使对象可见，如果希望对象可见，其父对象也必须使=是可见的。

collapse主要用来隐藏表格的行或列，隐藏的行或列能够被其他内容使用，对于表格外的其他对象，其作用等同于hidden。

hidden使对象被隐藏。

7.层叠顺序（z-index）

z-index:auto | number

auto遵循其父对象的定位。

number为无单位的整数值，可为负数。

二、相对定位

使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。使用相对定位，除了要将position属性值设置为relative外，还需要指定一定的偏移量。其中，水平方向的偏移量由left和right属性指定；垂直方向的偏移量由top和bottom属性指定。

1.不脱离文档流的体现

代码如下：

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
    div.relative {
      position: relative;
      top: 20px;
      left: 30px;
    }
  </style>
</head>

<body>
  <div>普通块级元素</div>
  <div class="relative">相对定位元素</div>
  <div>另一个普通块级元素</div>
</body>

效果如下：

注：在这个例子中，具有相对定位（class="relative"）的 <div> 元素虽然相对于它原本的位置向上偏移了 20px，向左偏移了 30px，但它原本在文档流中的空间仍然被保留。后面的 <div>（“另一个普通块级元素”）不会占据这个相对定位元素原来的位置，而是仍然按照这个元素在原位置的情况进行布局，就好像这个相对定位元素仍然在它原来的地方一样。

2.相对于原本位置偏移的实验讲解

代码如下：

<head>
  <style>
    div {
      width:100px;
      height:100px;
      margin:10px;
      background-color:green;
      border:10px blue solid;
    }
    div.relative1{
      position:relative;
      top:30px;
      border:10px blue solid;
    }
    div.relative2{
      position:relative;
      left: 50px;
      border:10px blue solid;
    }
    div.relative3{
      position:relative;
      top:20px;
      left:30px;
      border:10px blue solid;
    }
  </style>
</head>

<body>
  <div>原始元素1</div>
  <div class="relative1">相对定位元素1（仅top偏移）</div>
  <div>原始元素2</div>
  <div class="relative2">相对定位元素2（仅left偏移）</div>
  <div>原始元素3</div>
  <div class="relative3">相对定位元素3（top和left都有偏移）</div>
</body>

效果如下：

注：

对于class="relative1" 的元素，它只设置了 top 属性为 30px，所以它相对于自己的原始顶部位置向下偏移了 30px，但它原本的空间仍然被保留，后面的元素布局不受影响。
对于class="relative2" 的元素，设置了 left 属性为 50px，它相对于自己的原始左侧位置向右偏移了 50px，同样不影响其他元素在文档流中的布局。
对于class="relative3" 的元素，top 属性为 - 20px 使其向上偏移 20px，left 属性为 - 30px 使其向左偏移 30px，它在文档流中的原始空间依然被保留，其他元素的布局依旧按照它在原位置的情况进行。