Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

CSS positionering

1
Skriv svar
Permalänk
Medlem
●

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>
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Visa signatur

Vad har jag i min dator? Kopparrör.

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara