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 >
<div >
<div ></div>
<h2>Small title</h2>
<div >category</div>
</div>
<div >
<div ></div>
<h2>Long two <br> lines title</h2>
<div >category</div>
</div>
<div>
Most simple would be move <div >
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?
CodePudding user response:
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 >
<div >
<div >image</div>
<h2>Small title</h2>
<div >category</div>
</div>
<div >
<div ></div>
<h2>Long two <br> lines title</h2>
<div >category</div>
</div>
<div>
CodePudding user response:
Use flexbox:
.parent {
display: flex;
flex-direction: column;
}
.child1 {
order: 2;
}
.child2 {
order: 1;
}
<div >
<p >child 1</p>
<p >child 2</p>
</div>