CSS positioning with absolute value + determine the number of elements positioned above

Question

CSS positioning with absolute value + determine the number of elements positioned above

Is it feasible to adjust the position of an absolutely positioned element based on the height of the element above it? The objective is to align elements with the class

"pgafu-post-categories"

one line above an H2 heading, even when the lengths vary.

.pgafu-post-categories {
  position: absolute;
  top: -82px;
  width: fit-content;
  white-space: nowrap;
  padding: 4px 16px;
  font-size: 14px;
}

<div class="row">
  <div class="column">
    <div class="image-wrapper"></div>
    <h2>Small title</h2>
    <div class="pgafu-post-categories">category</div>
  </div>

  <div class="column">
    <div class="image-wrapper"></div>
    <h2>Long two <br> lines title</h2>
    <div class="pgafu-post-categories">category</div>
  </div>
  <div>

The simplest solution would involve moving the

<div class="pgafu-post-categories">

above the <h2> in the HTML code, but editing the HTML code is not an option. Is there a CSS-based approach to achieve this?

Edit: Perhaps it's also viable to use jQuery or JavaScript to calculate the height of the H2 element and then adjust the position of the absolutely positioned element accordingly?

javascript html jquery css

Answer 1

Answer №1

If you want to rearrange the order of elements using CSS, you can utilize the display: flex; property along with order: 1; on the child elements. To target a specific column, you can apply the class column--move-category. Check out the example code below for more clarity.

.column {
  display: flex;
  flex-direction: column;
}

.column h2 {
  order: 2;
}

.pgafu-post-categories {
  order: 0;
}

.column--move-category h2 {
  order: 2;
}

.column--move-category .pgafu-post-categories {
  order: 0;
}

<div class="row">
  <div class="column">
    <div class="image-wrapper">image</div>
    <h2>Small title</h2>
    <div class="pgafu-post-categories">category</div>
  </div>

  <div class="column column--move-category">
    <div class="image-wrapper"></div>
    <h2>Long two <br> lines title</h2>
    <div class="pgafu-post-categories">category</div>
  </div>
  <div>

Answer 2

If you want to rearrange the order of elements using CSS, you can utilize the display: flex; property along with order: 1; on the child elements. To target a specific column, you can apply the class column--move-category. Check out the example code below for more clarity.

.column {
  display: flex;
  flex-direction: column;
}

.column h2 {
  order: 2;
}

.pgafu-post-categories {
  order: 0;
}

.column--move-category h2 {
  order: 2;
}

.column--move-category .pgafu-post-categories {
  order: 0;
}

<div class="row">
  <div class="column">
    <div class="image-wrapper">image</div>
    <h2>Small title</h2>
    <div class="pgafu-post-categories">category</div>
  </div>

  <div class="column column--move-category">
    <div class="image-wrapper"></div>
    <h2>Long two <br> lines title</h2>
    <div class="pgafu-post-categories">category</div>
  </div>
  <div>

Answer 3

Answer №2

Implementing flexbox:

.container {
  display: flex;
  flex-direction: column;
}

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

<div class="container">
  <p class="item1">Item 1</p>
  <p class="item2">Item 2</p>
</div>

Answer 4

Implementing flexbox:

.container {
  display: flex;
  flex-direction: column;
}

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

<div class="container">
  <p class="item1">Item 1</p>
  <p class="item2">Item 2</p>
</div>

CSS positioning with absolute value + determine the number of elements positioned above

Answer №1

Answer №2

Similar questions

Is it feasible to generate emojis using a gulp Icon-font task?

Ways to update the cart page automatically after quantity changes in Shopify

Identify the moment when the SPAN element reappears in sight

Utilizing radio buttons for displaying or hiding a div element, along with implementing validation using jqueryvalidation.org

Angular can be used to compare two arrays and display the matching values in a table

What could be causing my HTML form elements to shift position when I click on them in Internet Explorer 8?

The Symfony API failed to generate a response

Switch between viewing outcomes retrieved from a database

Acquiring div elements from a collection of divs using selenium in Java

Node.js - Headers cannot be sent again once they have been sent

Managing all mouse interactions simultaneously in ReactJS

Using jquery to update a link when a different link is clicked

Opacity of absolutely positioned elements

The invocation of $.ajax does not work as a function

Combine es6 imports from the identical module using an Eslint rule or plugin

When running the `vue-cli-service test:unit` command, an error involving an "Unexpected token" message related to the usage of the spread operator

Adjusting the height of the Tinymce Editor in React Grid Layout after the initial initialization

Trigger a function when clicking outside the element, similar to how a Bootstrap modal is closed

Utilize a React function to incorporate an external link

Serialize all form fields using JQuery