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?
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.