巧用CSS的left|op|right|bottom值快速给子元素定位

马黑黑 · 发表于 2022-4-2 17:55

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-2 18:07 编辑

假设有父子元素如下：

<div class="father">
   <div class="son"></div>
</div>

现在想把儿子元素定位在父亲元素的指定位置，通常的实现思路无非就是分两步走：在CSS里，一是给父子元素设定position为relative和absolute，二是给子元素设定 left 和 top 值：

.father {
   margin: auto;
   width: 600px;
   height: 400px;
   background: olive;
   position: relative;
}
.son {
   position: absolute;
   width: 80px;
   height: 50px;
   left: 10px;
   top: 10px;
   background: pink;
}

这是不错的思路。上面的CSS代码，儿子元素在父亲元素的左上角，弄到右上角，用 left 值来设定位置的话就会有点麻烦，需要去计算父亲元素的宽度，还需要结合自己的宽度尺寸。这时，用 right 值替代 left 值就很省事：

right: 10px;

右下角呢？用 right 取代 left、用 bottom 取代 top：

right: 10px;
bottom: 10px;

最后是左下角，用 bottom 取代 top：

left: 10px;

bottom: 10px;

当儿子元素偏右或偏下的时候，上述方法比较经济，我们要做的就是儿子元素需要离开右边或底边多少个像素即可。

但当需要儿子元素绝对居中时，还是要老老实实用公式设定 left 和 top 值（假设儿子元素的宽高分别为80、60像素）：

left: calc(50% - 40px);

top: calc(50% - 30px);

以上父子元素定位很实用，可以做做尝试，加深体会。我将在后续回复中给出一个完整的实现案例。

马黑黑 · 发表于 2022-4-2 17:58

演示实例：

1

2

3

4

5

马黑黑 · 发表于 2022-4-2 17:58

二楼代码：

<style type="text/css">
.father {
margin: auto;
width: 600px;
height: 400px;
background: olive;
position: relative;
}
.father div {
position: absolute;
width: 80px;
height: 60px;
background: pink;
text-align: center;
line-height: 60px;
}
.father div:nth-Child(1) {
left: 10px;
top: 10px;
}
.father div:nth-Child(2) {
right: 10px;
top: 10px;
}
.father div:nth-Child(3) {
right: 10px;
bottom: 10px;
}
.father div:nth-Child(4) {
left: 10px;
bottom: 10px;
}
.father div:nth-Child(5) {
left: calc(50% - 40px);
top: calc(50% - 30px);
}
</style>
<div class="father">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

复制代码

马黑黑 · 发表于 2022-4-2 18:04

二楼的演示，为了简洁，子元素我用了 :nth-child(x) 选择器，x 代表儿子元素的第 x 个。

儿子元素的共性属性放在 .father div {...} 选择器里。然后用 :nth-child(x) 分别设定第 x 个子元素的位置。

:nth-child(x) 中的 child 我在示例中用了大写的 C（受JS影响太深），其实规范是用小写，好在这里并不影响。