Javascript 当js脚本在段落中插入文本时，徽标会移动

主要问题是，我的徽标位于标题旁边，页边空白处为负数，当用户填写用户名并继续时，徽标会向下跳转，这可能是因为段落中插入了文本。但我找不到解决办法

HTML:

#徽标{
显示器：flex；
柔性流：行；
最高保证金：-2.9雷姆；
左边距：11雷姆；
-ms变换：旋转（-15度）；/*IE 9*/
-webkit变换：旋转（-15度）；/*铬合金、Safari、Opera*/
变换：旋转（-15度）；
证明内容：之间的空间；
浮动：左；
垂直对齐：顶部；
位置：绝对位置；
}
#logo>img{
最大宽度：230px；
最大高度：95px；
宽度：自动；
高度：自动；
}

数独

-->

如果您将徽标放入title div中，那么它将起作用，您只需调整边距和填充即可

例如： HTML

<nav>
  <div class="brand">
  <h3>LogoName</h3>
  <img src="https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/crest.png" alt="">
</div>
</nav>

---

在

id=“hoofding”

内使用

id='logo'

将

id='logo'

放在

id=“titel”

后面

id='logo'

不需要flex属性。

id='logo'

不需要float属性。

id='logo'

不需要flex-flow属性。
使用变换：

旋转（-15度）在img标签中，而不是在
id='logo'
中

删除
id='logo'
左侧和顶部的页边距

您可以使用about
margintop:15px在img标签中。
您应该将徽标/图像定位在与标题相同的包含元素（
#hoofding
）中。然后使用相对定位将其定位在元素外部

这里有一个人为的例子


功能定位（选择器、底座）{
base=base&&1==base.nodeType？base:document；
返回base.querySelector（选择器）；
}
var btn=定位（'按钮'），
hb=定位（'标题底部'），
user=locate（'.user'）；
btn.addEventListener（'click'，函数（e）{
hb.classList.toggle（'hide'）；
user.classList.toggle（'hide'）；
} );
正文{
保证金：0；
}
标题{
}
.收割台顶部，
.收割台底部{
显示器：flex；
高度：75px；
对齐项目：居中；
}
.收割台顶部{
填充：0 1rem；
颜色：白色；
背景色：黑色；
}
.收割台顶部a{
颜色：白色；
}
.用户{
柔性生长：1；
文本对齐：右对齐；
}
.收割台底部{
证明内容：中心；
}
.hb项目{
保证金：0.1rem；
填充：0.5雷姆1雷姆；
颜色：白色；
背景色：青色；
边界半径：0.25雷姆；
}
h1{
保证金：0；
颜色：青绿色；
}
.标志{
显示：块；
变换：旋转（-13度）；
位置：相对位置；
顶部：25px；
左：15px；
}
.隐藏{
显示：无；
}

数独
欢迎用户！
一个
两个
点击我！
为什么不将徽标放在
#hoofding
元素中？因为我想这样做：将图像放在
#hoofding
中不会阻止您这样做。我会尝试一下，非常感谢。为什么您不制作一个紧凑的东西，比如
文本和徽标本身作为徽标。。你可以在photoshop中轻松地在几分钟内完成这项工作。问题是我希望它看起来像这样：。把它放在标题栏里。我不知道它是不是会这样，也不知道怎么做。一模一样。这是你的例子，希望对你有所帮助
nav{
  background-color: black;
  height: 50px;
}
.brand{
  position: relative;
}
.brand h3{
  display: inline;
  color: white;
}