Question 36455 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

css absolute position + count element above – Jquery

Is possible set position of absolute element with count height of element above? The goal is get elements with class "pgafu-post-categories" to one line above H2, when is different length.

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>

Most simple would be move <div class="pgafu-post-categories"> above <h2> in HTML, but it is not possible edit HTML code. Is there a way to do this with css?

Edit: Maybe there is possible also use jquery/javascript to count height of h2 element and then set position to absolute element?

Tags:

2

Answers


  1. 0

    Use flexbox:

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

.child1 {
  order: 2;
}

.child2 {
  order: 1;
}
    <div class="parent">
  <p class="child1">child 1</p>
  <p class="child2">child 2</p>
</div>
    Login or Signup to reply.
  2. 0

    You can use display: flex; and the property order: 1; on the children. If you want it to only apply to a specific column you can use the class column--move-category on the column in my example. Hope this helps.

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search