问题描述
我试图使我的绝对定位元素具有响应性并保持我设置的左、右、下和上的位置,但它在我改变屏幕尺寸时不断变化,它只是坚持那个位置,是在那里我可以解决这个问题,这样绝对定位的按钮将像在移动视图中一样随着它们所附加的图像继续移动?
<div class="header-hero">
<div class="header-text">
<h3 class="header-text-h3">hey</h3>
<h1 class="header-text-description">
Make Banking Easy with Express
</h1>
<p class="header-text-texts">
Together we can make banking awesome!
</p>
</div>
<div class="header-image">
<img src="./assets/hand.jpg" alt="" class="header-hand" />
<button class="header-image-1">Transfer</button>
<button class="header-image-2">Loan</button>
</div>
</div>
.header {
&-hero {
height: 40px;
}
&-nav {
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
}
&-img {
width: 80px;
}
&-button {
padding: 0.5rem 1.5rem;
// height: 1rem;
margin-right: -1rem;
height: 100%;
}
&-hero {
position: relative;
}
&-text {
width: 80%;
padding-top: 2rem;
font-size: 1.2rem;
&-texts {
background-image: linear-gradient(
to left,violet,indigo,blue,orange,red
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&-image {
height: 100%;
position: relative;
display: flex;
justify-content: center;
// top: 80px;
// bottom: -200%;
&-1 {
top: 10px;
position: absolute;
left: 205px;
z-index: -1;
// @media screen and (min-width: 374px) {
// left: 220px;
// }
// @media screen and (max-width: 320px) {
// left: 178px;
// top: 50px;
// }
// @media screen and (min-width: 359px) {
// left: 205px;
// top: 90px;
// }
}
&-2 {
top: 170px;
position: absolute;
left: 84px;
z-index: -1;
margin: 0 auto;
// @media screen and (max-width: 320px) {
// left: 67px;
// }
// @media screen and (min-width: 359px) {
// left: 80px;
// top: 240px;
// }
}
}
&-hand {
width: 50%;
position: fixed;
// top: -50%;
// transform: translateY(43%);
margin: 0 auto;
// @media screen and (max-width: 320px) {
// transform: translateY(20%);
// }
// @media screen and (min-width: 359px) {
// transform: translateY(30%);
// }
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)