Question

文本（instagram和商店）向下移动到黑色区域，如下面的图片所示 https://imgur.com/a/zevB8Op

此处是代码：

HTML

<div id="rightBlock">
    <a target="_blank" href="http://instagram.com/pierrebassene.world" style="text-decoration: none; color: black; font-weight: bold; font-family: Helvetica ;font-size: 2vw ;">INSTAGRAM</a>
</div>

<div id="mid">
    <a style="font-family: Helvetica ; font-weight: bold; font-size: 2vw;">SIGN UP </a>
</div>

CSS

#rightBlock {
    position: fixed;
    top: 90%;
    left: 45.2%;
    bottom: 0;
    right: 0;
    z-index: 1;
}

#mid{
    position: fixed;
    top: 82%;
    left: 47%;
    bottom: 0;
    right: 0;
    z-index: 1;
}

我已经尝试了几种方法，包括绝对和固定定位，但似乎没有任何效果：/

Answer 1

原因几乎可以肯定是由于在“ top”属性中使用了百分比值（如果没有更多的上下文代码，将无法确认）。尝试改写/重新组织代码，以免您使用的百分比值会相对于设备屏幕大小而变化。
您可以尝试切换到像素值。 EG：

margin-top: 200px; //replace with desired px value

此外，在代码中实施“ 关注点分离”概念也是一种好习惯。
HTML是一种标记语言，它描述结构并包含页面的实际内容。 CSS用于对页面内容进行样式设置。
我建议您将所有样式属性移入CSS。这样可以使您的HTML保持整洁，并便于将来阅读/维护，同时还因为所有样式都定义在一个位置（CSS样式表-而不是CSS样式表和/或HTML样式）中，因此可以清楚地定义在哪里修改样式更改属性）。

文字从桌面屏幕更改为移动屏幕的位置

1 个答案: