css - 关于高度自适应的img标签中放置相对定位元素的问题
本文介绍了css - 关于高度自适应的img标签中放置相对定位元素的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
rt如图,图上的篮球明星图片为一个高度自适应的img标签(也就是说这个图片在以后可能会改,但是宽度必须100%,所以高度就得按比例自适应了),然后我想让下面那个包含头像和文字的div.card元素能够始终固定在该图片内部距离底部200px左右的位置。
我之前尝试过使用relative定位是可以实现我的需求,但是会导致图片的父级元素(div.top)下面出现一个200px的多余部分,且在该元素使用margin-bottom: -200px以及下面的元素或者是对div.card元素本身使用margin-top: -200px都无法去除这个空白,也就是出现下图所述的情况。
现在我该怎么才能完美实现我粗体字所表达的需求?
解决方案
改写了你的css代码,需要修改的地方我已经加了注释. 效果演示
思路是:
设定容器.top的position为相对定位
设定浮动的头像和用户名区域为绝对定位,它的参照物是 .top元素,设定到底部为20px即可。
.top {
position: relative; /**关键*/
margin: 0;
padding: 0;
}
.top img {
margin: 0;
padding: 0;
width: 100%;
}
.card {
position: absolute; /**关键*/
left: 60px;
bottom: 20px; /**关键*/
}
#avatar {
float:left;
width: 120px;
height: 120px;
border-radius: 50%;
}
#username {
float: left;
margin-left: 20px;
height: 120px;
line-height: 120px;
font-size: 54px;
color: white;
}
这篇关于css - 关于高度自适应的img标签中放置相对定位元素的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文