当我不指定部分的位置时,手机图像完全符合指定的宽度。
也就是-width: 60%;
width: 60%;
但是,当我将position和z-index应用到前两个部分时,width: 60%;没有得到应用,因为手机图像变得太大了。
position
z-index
HTML和CSS代码:
第一个
我希望最终结果是这样的:
x1c4d 1x指令集
chhkpiq41#
嘿,伙计,我真的不知道这是不是正确的方法,但它似乎工作得很好。我所做的是改变宽度的最大宽度,使它从60%到18%。它看起来不错,像教训。然后当你切换到平板电脑或移动的,我让@media函数将其更改回60%,这样它就不会一直缩小,看起来很奇怪。如果我解释正确的话,可以使用idk,但代码如下:
.title-image { max-width: 18%; transform: rotate(25deg); position: absolute; right: 22%; } @media (max-width: 991px) { .title-image { position: static; transform: rotate(0deg); max-width: 60%; } }
我是一个完全的初学者喜欢你,但我希望这有助于以任何方式。
sczxawaw2#
你只需要设置第一个section的position就可以了,如果你设置了title的position: relative;和z-index: -1;,你就不需要在你的.title-image类上设置位置了。下面是代码片段的结果:
title
position: relative;
z-index: -1;
.title-image
第一个您可以熟悉css position属性here。我不会包括任何@media查询,因为它不是问题的一部分。
@media
2条答案
按热度按时间chhkpiq41#
嘿,伙计,我真的不知道这是不是正确的方法,但它似乎工作得很好。我所做的是改变宽度的最大宽度,使它从60%到18%。它看起来不错,像教训。然后当你切换到平板电脑或移动的,我让@media函数将其更改回60%,这样它就不会一直缩小,看起来很奇怪。如果我解释正确的话,可以使用idk,但代码如下:
我是一个完全的初学者喜欢你,但我希望这有助于以任何方式。
sczxawaw2#
你只需要设置第一个section的
position
就可以了,如果你设置了title
的position: relative;
和z-index: -1;
,你就不需要在你的.title-image
类上设置位置了。下面是代码片段的结果:
第一个
您可以熟悉css
position
属性here。我不会包括任何
@media
查询,因为它不是问题的一部分。