Struggle with Arranging Elements in CSS using position absolute & relative

Currently tackling a project involving adjusting the positioning of elements within a sidebar. The sidebar holds Font Awesome icons and corresponding text elements, with the goal of moving both the icons and text together as one unit using attribute and class selectors.

Below is the HTML and CSS code applied 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;


}

The issue arises when trying to adjust the position of the text elements despite applying the left property to the move-text class. The icons act incorrectly when using position: absolute or relative.

Experiments show varying outcomes based on different positioning combinations, but the main problem remains with the inability to fine-tune the elements' positions successfully.

If anyone has faced this challenge before, any insights or assistance would be highly appreciated. Thank you.

Answer №1

It appears there may be some confusion surrounding the concept of relative and absolute positioning in CSS. When you apply position: relative to a block element, you establish a point of reference for any absolutely positioned elements nested within it. If the immediate parent does not have position: relative specified, you must look higher up the hierarchy for that declaration. In the absence of any element with position: relative, the body element becomes the default reference point for absolutely positioned elements.

In the example provided, there are four child elements positioned absolutely. However, only two of them have a parent with 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to showcase two div elements side by side within my carousel

/* Implementing slideshow functionality */ var currentIndex = 0; displaySlides(); function displaySlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i ...

Steps to deactivate a textarea in angularjs based on a selected option's value meeting a specific condition

Hello, I am a newcomer to AngularJS and I am looking to disable the textarea when a specific option is selected from a dropdown menu. I attempted to use ng-disabled="(here my ng-model value)" but unfortunately, it did not work as expected. If creating a ...

What is the best way to exclude HTML tags from the innerHTML attribute?

Currently, I am in the process of developing a messenger application and facing an issue where my messages are not ignoring HTML tags. This is happening because I directly paste the input text into the innerHTML of the message. The code snippet responsible ...

Exploring the art of JSON interpretation within Highcharts

Below is an example snippet that utilizes static data: Highcharts.chart("container", { title: { text: "Highcharts pie chart" }, xAxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Ju ...

In order to verify the dynamic components within the table

I need assistance with validating dynamically created textareas. In the code below, I am able to validate only the first row but struggling to do so for the second row. How can I get all the row values validated? Thank you in advance. To generate dynamic ...

Scrolling vertically using window.open functionality

I am trying to open a pop-up window using window.open. I would like the scrollbars to appear only if necessary. Unfortunately, in Safari, the scrollbars do not show up unless I include scrollbars=1 in the code. However, this also causes horizontal scrollb ...

Troubleshooting issues with media queries related to device pixel ratio

My media queries in LESS are functioning correctly on the desktop, but encountering issues when tested on an iPad2 or Samsung Galaxy 4 phone. It appears that the device-pixel-ratio is causing disruptions. I attempted to reduce the min-device-pixel-ratio to ...

Is it possible to determine the search query if the search term appears within the website URL?

I'm trying to figure out which action url and name term to use when the search term is located in the middle of the URL. For instance, the HTML code below enables me to type text and upon pressing enter or the button, it redirects me to the website w ...

Photoshop optimized webpage appearing distorted on Internet Explorer after saving for web

I designed a webpage using Photoshop, sliced it, saved it for the web, and uploaded the HTML file. It looks great in Firefox and Chrome, but Internet Explorer tells a different story. Does anyone know how to fix it and why there is this black padding? IE: ...

Highlight text when the user is scrolling the page - using JQUERY

Can anyone suggest a way to dynamically underline text as the user scrolls down a webpage? The underline should only be visible while the user is scrolling. I've experimented with animate.css and other plugins, but haven't been able to achieve th ...

Prevent floating labels from reverting to their initial position

Issue with Form Labels I am currently in the process of creating a login form that utilizes labels as placeholders. The reason for this choice is because the labels will need to be translated and our JavaScript cannot target the placeholder text or our de ...

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

Have you ever wondered about the distinction between offsetHeight, clientHeight, and scrollHeight? What about offsetWidth, clientWidth, and scrollWidth? Understanding these differences is crucial for working effectively on the client side. Without this kn ...

How to verify in HTML with Angular whether a variable is undefined

When it comes to the book's ISBN, there are instances where it may not be defined. In those cases, a placeholder image will be loaded. src="http://covers.openlibrary.org/b/isbn/{{book.isbn[0]}}-L.jpg?default=false" ...

What is the best way to transform height in pixels to percentage in order to create a responsive design that adjusts smoothly on

Currently, I am in the process of developing a responsive grid system by using a max-width of 980px to convert my fixed PX widths to percentages. However, I am facing some challenges in updating the heights that are also set in PX to %. Could anyone provid ...

Enhance your web forms with jQuery Chosen's automatic formatting feature

Having trouble adding a feature to my multi-select input box using jQuery Chosen. The current functionality allows users to enter custom values not in the list. The new feature should automatically format numbers entered by users, for example: User input ...

JavaScript Tab Fade Effect

I have a tab system that utilizes JavaScript to switch tabs. I am trying to implement a fade in and out effect when switching tabs. The current JavaScript simply adds or removes the clicked tab selected by the user. I have managed to partially achieve the ...

No match was found for the reverse of 'idname' with arguments '()'. Attempted 1 pattern: ['viewRegistration/(?P<pk_test>[0-9]+)/$']

When setting up my views, I have the following code: def home(request): if request.user.participant: current_user = request.user subscriptionUser = int(Subscription.objects.get(participant=current_user.participant).id) else ...

What is the best way to convert this JavaScript iteration function into jQuery?

I recently encountered an issue with my JavaScript function that returns a list of elements with the class ".youtube", loops through them, and calls another function. The JavaScript logic is flawless, but I wanted to convert it into jQuery for better reada ...

The animation came to a halt after a brief period

Here is the code I wrote. When the button is clicked, the 3 containers should start flashing indefinitely, but they stop after a while. I can't figure out why. Any ideas? <!DOCTYPE html> <html> <head> <title></title> & ...

Validating radio buttons in Ionic framework

I am currently working on implementing a form in my application using Ionic and AngularJS. I have added validation to all the fields, but I am facing an issue with the radio button validation. The error message is being displayed correctly when no radio bu ...