在CSS中定位具有绝对和相对位置的困难元素-解网

问：

我目前正在做一个项目，我正在尝试调整侧边栏中元素的位置。侧边栏包含 Font Awesome 图标和相应的文本元素，我正在尝试使用属性选择器将两个图标作为一个实体一起移动，并执行相同的操作，但使用类选择器，侧边栏中的文本。

我应用了以下 HTML 和 CSS 代码来定位图标和文本元素：

[HTML全文]

<li> <a href= "#"> <i class="fas fa-search "></i> <span class="nav-color move-text">Search</span> </a> </li>
   <li> <a href= "#"> <i class="fa-solid fa-gears "></i><span class="nav-color move-text">Settings</span> </a> </li>
   <li> <a href= "#"> <i class="fa-solid fa-inbox "></i><span class="nav-color move-text">Updates</span> </a> </li>

CSS的

[class*="fa-"] {
position:relative;
top:auto;
left:15px;
bottom:20px;
right:auto;
color:#a5a8a8
}

.move-text{
position:relative;
left:15px;


}

尽管将 left 属性应用于 move-text 类，但文本元素仍未按预期移动。当我使用位置时，图标的行为不正确：绝对或位置相对

当我对两个图标使用位置相对时

当我对图标使用相对位置，对文本使用绝对位置时

当我对两者都使用绝对位置时

当我对图标使用绝对位置，对文本使用相对位置时

主要问题是图标和文本不移动，我最初可以通过将其从绝对位置更改为相对位置来移动它，这将使文本转到页面的另一端，反之亦然，但是如果我在那之后尝试调整它，例如调整任何顶部，bottom，left，right值，它根本不会移动，就像没有被识别一样。

除此之外，如果我要调整任何顶部底部、左侧、右侧，则不包括绝对/相对位置，比如我把右边放在 15px;启动我的实时 Web 服务器，看看它是否加载并工作，然后再次使用其他值调整它，它不会移动任何后续尝试通过调整其他值来微调定位，没有结果。就好像元素被卡在它们的初始位置，不管我对CSS属性做了什么更改。

主要问题是图标和文本不移动，我最初可以通过将其从绝对位置更改为相对位置来移动它，这将使文本转到页面的另一端，反之亦然，但是如果我在那之后尝试调整它，例如调整任何顶部，bottom，left，right值，它根本不会移动，就像没有被识别一样。

除此之外，如果我要调整任何顶部底部、左侧、右侧，则不包括绝对/相对位置，比如我把右边放在 15px;启动我的实时 Web 服务器，看看它是否加载并工作，然后再次使用其他值调整它，它不会移动任何后续尝试通过调整其他值来微调定位，没有结果。就好像元素被卡在它们的初始位置，不管我对CSS属性做了什么更改。

我已经确保

1.没有控制台错误

2.No 内联元素篡改它们的显示方式

3.As 据我所知，语法是正确的，请随时发现任何我看不到的错误

有没有人遇到过这个问题？我非常感谢任何见解或形式的帮助，谢谢。

HTML CSS 图标 css-position font-awesome

我认为你误解了css中相对定位和绝对定位的概念。通过给出块位置：相对，您可以为嵌套在其中的绝对定位元素定义一个参考点。如果未在直接父级上指定位置相对，则需要在层次结构中的较高元素上查找它。如果没有元素被赋予相对位置，则 body 元素将是 Position absolute 的确切引用。

在下面的代码中，4 个子元素是绝对定位的。但是其中两个有一个被赋予位置的父母：相对，而另外两个则没有。

body {
  margin: 0;
  font-family: sans-serif;
}

h1 {
  text-align: right;
  line-height: 2;
  margin-right: 1em;
}

.parent-relative {
  width: 24em;
  height: 16em;
  background-color: green;
  position: relative;
}

.child1 {
  padding: 1em;
  background-color: red;
  position: absolute;
  left: 2em;
  top: 2em;
  color: white;
  max-width: 150px;
  font-size: 70%;
}

.child2 {
  padding: 1em;
  background-color: yellow;
  position: absolute;
  bottom: 2em;
  right: 2em;
  max-width: 150px;
  font-size: 70%;
}

<h1>Relative/absolute concept</h1>
<div class="parent-relative">
  <div class="child1">My name is Child1. My parent is green DIV with position relative</div>
  <div class="child2">My name is Child2. My parent is green DIV with position relative</div>
</div>

<div class="parent-no-relative">
  <div class="child1">My name is Child1. I don't have a parent relative. My position is calculated from the BODY</div>
  <div class="child2">My name is Child2. I don't have a parent relative. My position is calculated from the BODY</div>
</div>

查看块的代码（它是绿色的 DIV）。它包含块和 .如果没有绿色块的属性，其后代的位置将不是从绿色部分计算的，而是从身体计算的。看看你的代码，我基本上不会对它使用定位，而是使用类似的东西.parent-relative.child1.child2position relativedisplay: flex

0赞 Your-neigbourhood -developer 10/27/2023

我看过一个 flexbox 网格教程，因为我不知道它是什么或如何将其应用于我的代码，如果我没记错的话，除了居中属性之外，我看不到如何将其应用于我的代码，flexbox 的主要目的是图标根据用户调整浏览器而增大/缩小，但这并不是我想要实现的，我缺少什么吗？

上一个：绘制到“位置：固定”叠加层，与滚动的内联内容对齐

下一个：在下拉式大型菜单中将标题居中置于两个无序列表上

在CSS中定位具有绝对和相对位置的困难元素

Difficulty Positioning Elements in CSS with position absolute & relative

评论

评论