盒子的定位

Posted 2021-11-09 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒子的定位相关的知识，希望对你有一定的参考价值。

盒子的定位

一、定位（position）

定位position 说明：
设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。

定位 position 语法：
position : static 、absolute 、relative、fixed 。

static : 称为静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。

relative ：称为相对定位，使用相对的盒子的位置常以标准流动排版方式为基础，然后使盒子相对于它在原来的位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流的方式对待它。

absolute : 称为绝对定位，盒子的位置以它的包括框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好象这个盒子不存在一样。

fixed : 称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的移动滚动条时，依然保持对象的位置不变。

position 指定的偏移量，水平方向通过left或者right属性来指定；竖直方向通过top和bottom来指定。left，right，top，bottom这4个属性只有当position属性设置为absolute、relative和fixed时才有效。
下面提供一些基础代码：

<!DOCTYPE html>
<html >
<head>
<title>position属性</title>
<style type="text/css">

body{
    margin:20px;
    font :Arial 12px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
}

#son{
    background-color:#D2B48C;
    border:1px dashed #000000;
    padding:10px;
}
</style>
</head>
<body>
    <div id="father">
        <div id="son">Box盒子</div>
    </div>
</body>
</html>

效果图：

1、static (静态定位)

在css的position中，设置static为默认值，它表示块保持在原本应该在的位置上，即该值没有任何的移动效果，这里就详细说了。
2、relative (相对定位)

使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。position指定的偏移量可以使用left，right，top，bottom等属性进行设置。

（1）除了将position属性设置为relative属性，再设置一些偏移量距离即使用right属性和bottom属性，如下：

#son{
    background-color:#D2B48C;
    border:1px dashed #000000;
    padding:10px;
    position:relative;
    right:28px;
    bottom:28px;
}

效果图：

上图可以看出Box盒子和原来的位置相比，它向左和向上分别移动了28像素，也就是说，“right:28px”的作用就是使Box盒子的新位置在它原来位置的右边框左侧28像素的地方，“bottom:28px”的作用就是使Box盒子的新位置在原来位置的下边框上侧28像素的地方。
这里用到了right和bottom这两个CSS属性，实际上在CSS中一共有4个配合position属性使用的定位属性，除right 和 bottom 之外，还有top和left。

当子块使用相对定位以后，它发生了偏移，即使移动到了父盒子的外面，父盒子也不会变大，就好像子盒子没有变化一样。
(2)两个子块的情况

下面讨论的是两个子块的情况。把上面的基础代码改为如下代码，在父div中放两个子div。首先对它们都不设置任何偏移。

<!DOCTYPE html>
<html>
<head>
<title>两个子块相对定位的情况</title>
<style type="text/css">
body{
    margin:20px;
    font :Arial 12px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
}

#father div{
    background-color:#B2D4BC;
    border:1px dashed #000000;
    padding:10px;
}
#son1{

}
#son2{

}
</style>
</head>
<body>
    <div id="father">
        <div id="son1">Box盒子1</div>
        <div id="son2">Box盒子2</div>
    </div>
</body>
</html>

效果图：
上图可以看到那两个子块的设置还都空着。下面首先将Box盒子1的CSS设置为：

#son1{                                                                        #son
position:relative;
bottom:28px;
right:28px;
}

再看效果图：

与前一个效果图相比可以看到子块“Box盒子1”的位置以自身为基准向上和向左各偏移了28像素，而Box盒子2没有任何变化。上面的实验是针对标准流方式进行的，实际上，对浮动的盒子使用相对定位也是一样的，都会相对于原有的位置进行指定的偏移并到达新的位置，而这一偏移并不会对其后面的兄弟元素带来任何的影响。

“相对定位” 的原则：
（1）、使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。
（2）、使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。
相对定位，就是以盒子本身在标准流中或者浮动时原本的位置作为偏移基准的。

3、absolute (绝对定位)

通过上面介绍的例子可以了解到 position 属性需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是以什么作为偏移的基准。绝对定位，盒子的位置以它的包含框为基准进行偏移（如果对象的父级没有设置定位属性，即还是遵循 HTML 定位规则的，则依据 body 对象左上角作为参考进行定位）。

下面提供一些基础代码：

<!DOCTYPE html>
<html>
<head>
<title>三个子块绝对定位的情况</title>
<style type="text/css">
body{
    margin:20px;
    font :Arial 12px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
}

#father div{
    background-color:#D2B48C;
    border:1px dashed #000000;
    padding:10px;
}
#son2{

}

</style>
</head>
<body>
    <div id="father">
        <div>Box盒子1</div>
        <div id="son2">Box盒子2</div>
        <div>Box盒子2</div>
    </div>
</body>
</html>

效果图：

（1）尝试使用绝对定位,对#son2的CSS设置位置，目前它还是空白的，下面将它改为：

#son2{
    position: absolute;
    top: 28px;
    right: 28px;
}

效果图：

上图是以浏览器窗口为基准，从右上角开始向下和向左各移动28像素。这时候是否产生了一个这样的疑问“是不是所有的绝对定位都以浏览器为基准来定位呢？”答案是否定的，接下来对上面的代码做一处修改，为父div增加一个定位样式，代码如下：

#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
    position: relative;
}

效果图：

上图所示效果发生了变化，偏移的距离没有变化，但是偏移的基准不再是浏览器窗口，而是它的父div了。

绝对定位的原则：
（1）、使用绝对定位的盒子以它的“最近”
的一个“已经定位”的“祖先元素”为基准进行偏移，如果没有已经定位的祖先元素那么会以浏览器为基准进行定位。
（2）、绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

4、fixed （固定定位）

fixed定位与absolute定位有些类似，区别在于定位的基准不是祖先元素，而是浏览器窗口或者其他显示设备的窗口。当访问者拖动浏览器窗口的滚动条时，固定定位的元素将保持相对浏览器窗口不变的位置。这里就不详细介绍了。

5. z-index (空间位置)

z-index属性用于调整定位时重叠的上下位置，页面为x-y轴，垂直于页面的方向为z轴，z-index值大的页面位于其值小的上方。

z-index属性的值为整数，可以是正数也可以是负数。当块被设置了position属性时，该值便可以设置各块之间的重叠高低关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。

盒子的定位介绍就到此结束了，谢谢你的欣赏！

以上是关于盒子的定位的主要内容，如果未能解决你的问题，请参考以下文章

absoulue与relative配合定位盒子居中问题