html css icons css-position font-awesome

Difficulty Positioning Elements in CSS with position absolute & relative

I'm currently working on a project where I'm trying to adjust the positioning of elements within a sidebar. The sidebar contains Font Awesome icons and corresponding text elements, and I'm attempting to move both the icons together as one entity using an attribute selector and doing the same but with a class selector with my text within the sidebar.

I've applied the following HTML and CSS code to target the icons and text elements:

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;


}

Despite applying the left property to the move-text class, the text elements are not moving as expected. The icons are behaving incorrectly when I use position: absolute or position relative

when I use position relative for both icons

when i use position relative for icon and absolute for text

when i use position absolute for both

when i use position absolute for icon and relative for text

The main issue is the icons and text not moving I may be able to move it initially at first by changing it from position absolute to position relative which will make the text go to the other end of the page and vice versa but if I was to try to adjust it after that like adjust any of the top,bottom,left,right values it would not move at all it's like it's not being recognised.

To add to that also, excluding the position absolute/relative if I were to adjust any of the top bottom , left, right say I put right at 15px; launch my live web server and see that it loads and works then adjust it with the other values again it won't move any subsequent attempts to fine-tune the positioning by adjusting other values yield no results. It's as if the elements are stuck in their initial positions regardless of the changes I make to the CSS properties.

I have ensured

1.There are no console erros

2.No inline elements tampering with they way they're appearing

3.As far as I know the syntax is correct feel free to spot any mistakes that I can't see

Has anyone encountered this issue? I greatly appreciate any insights or form of help thank you.

Solution

I think you misunderstand the concept of relative and absolute positioning in css. By giving a block position: relative, you define a reference point for absolutely positioned elements nested within it. If position relative is not specified on the immediate parent, you need to look for it on a higher element in the hierarchy. If no element is given position relative, then the body element will be the exact reference for Position absolute.

In the code below, the 4 child elements are positioned absolutely. But two of them have a parent that is given position: relative, while the other two do not.

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>