Trädvy Permalänk
Medlem
Registrerad
Sep 2005

CSS positionering

Hej. Någon som är bra på css positionering?
Skulle vilja få en div att hamna över texten som ligger på en ”article” under, det fungerar fint med position: absolute;
Fast skulle även vilja att den centrerades med den divven som är under. Då blir det värre. Så en absolut som rättar sig efter ”article”, är det möjligt?

<html> <body> <nav> </nav> <section> <article> Massa text i article La la la <div class=”over”> Div som en popup vill att den hamnar i mitten av ”article” även över all text . </div> </article> </section> <aside> </aside> <footer> </footer> </body> </html>

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Feb 2018

Jajamän! Det du söker är absolutpositionering i kombination med relativ positionering. Koordinater för elementet med Absolute relaterar till närmaste element ovanför som har antingen Absolute eller Relative. Sätt därför position: relative; på article-elementet och så är du klar*.

Kodexempel:

<html> <head> <title>test</title> <style type="text/css"> .under { background-color: #ff0; width: 400px; height: 300px; display: block; position: relative; } .over { background-color: #f00; color: #fff; position: absolute; width: 200px; height: 100px; top: calc(50% - 50px); // minus half of own height left: calc(50% - 100px); // same for width } </style> </head> <body> <nav> </nav> <section> <article class="under"> Massa text i article La la la <div class="over"> Div som en popup vill att den hamnar i mitten av ”article” även över all text . </div> </article> </section> <aside> </aside> <footer> </footer> </body> </html>

Kör detta och lägg in mer text i article-elementet så får du se vad som händer.

Vad har jag i min dator? Kopparrör.

Trädvy Permalänk
Medlem
Registrerad
Sep 2005

Tackar.
Hittade precis svaret på nätet efter lite sökande:) Det fungerade fint med article satt till relative