Question

我对编码很陌生，需要选择一些大脑来解决这个问题，这个问题发生在我正在编码的暂存页面上。

公司徽标位于底角，某些屏幕尺寸重叠并干扰文本（当您手动调整浏览器窗口大小时）。我使用过媒体查询，所以这不会发生在设计上。

我不确定什么是可能的，但我总是需要将徽标放在右下角。但是当徽标开始干扰文本时，我希望徽标从屏幕上消失，理想情况下我希望用户必须向下滚动才能看到徽标。

此网站有问题http://embalmer-tiger-47168.bitballoon.com/

继承人我的HTML

        <img class="logo--master" src="assets/images/logomark.png" alt="Proud Robinson Logo">

    </div>

继承我的CSS

.logos {
position: absolute;
bottom: 55px;
right: 55px;

}

.logo--master {
    width: 7em;

}

非常感谢提前:)

Answer 1

您需要徽标才能与文字保持相对位置。你可以使用position：relative。之后，如果它仍然没有像你想要的那样响应，你可以将它放在一个与页面宽度相同的div中（宽度：100％），你可以使用你的徽标的de margin来居中它（通常margin-left：auto; margin-right：auto;可以工作，但你可能必须使用％）。希望这会对你有所帮助。

Answer 2

绝对定位元素会将其从页面的正常流程中取出，这样其他元素就不会知道它会重叠。如果您将margin的右下角.container应用于与徽标大小相匹配的.container，则7em中的内容不会重叠。徽标大约calc(7em + 55px)高/宽（按照您在css中给出的宽度），从右/下方55px，因此.container上div.container { margin: 0 calc(7em + 55px) calc(7em + 55px) 0; }的右/下边距应为为徽标留出空间。

builder.RegisterType<MyController>().InstancePerRequest();

响应屏幕尺寸时，徽标重叠文字

2 个答案: