请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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);
以上父子元素定位很实用,可以做做尝试,加深体会。我将在后续回复中给出一个完整的实现案例。
|