.uvc-main-heading p {
position: relative;
left: -8%;
transform: rotate(-20deg)
}
<div class="uvc-main-heading ult-responsive">
<p style="text-decoration:underline;font-weight:bold;color:#800000;">NEW</p>
</div>
<div class="uvc-main-heading ult-responsive">
<h2 style="font-weight:bold;color:#000000;">Open Stock</h2>
</div>
这会将它定位在我想要的位置,但是当我调整浏览器大小时,新元素会随之移动,我希望它保持原位,但仍会与其余元素一起滚动。
我知道我可以使用 CSS 和媒体查询来做每个断点,但我正在努力寻找更好的解决方案
谢谢
最佳答案
为什么不直接将新标签移动到标题中并将其绝对定位到标题,那么它的位置将不会随着相对于标题的变化而改变:
body {
text-align: center; /* for test only */
}
.uvc-main-heading {
position: relative; /* position new absolutely to this */
display: inline-block; /* for test (so you can see it centred */
}
.uvc-main-heading p {
/* position this absolutely */
position: absolute;
top: 0;
left: 0;
/* translation moves it left 25% it's ownb width and 100% up it's own height */
transform: rotate(-20deg) translate(-25%, -100%);
}
<div class="uvc-main-heading ult-responsive">
<h2 style="font-weight:bold;color:#000000;">Open Stock</h2>
<p style="text-decoration:underline;font-weight:bold;color:#800000;">NEW</p>
</div>
关于css - 调整大小时保持 p 元素附加到 h2 p 元素不移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50723774/