CODEWITHSUNDEEP
htmlcss
GoS
GoS

Reputation: 1

Buttons Stack on each other?

Im creating a website in german and have the problem that the buttons like home stack on each other when i set it to position:absolute or fixed. But when i set it to relative it works. Can someone explain me that?

The CSS file:

#top {
    display: inline-block;
    width: 352px;
    height: 160px;
    color : white;
    background-color: #2D2D2D;
    float: left;
    font-family: century gothic;
    font-size: 25px;
    border: none;
    margin: 0px;
    position: fixed
    }

and the html file:

<nav>
 <a class="weiter" href="Home.html"><button id="top" >Home</button></a>
 <a class="weiter" href="ueberuns.html">
 <button  id="top">&Uuml;beruns</button></a>
 <a class="weiter"><button id="top" id="click">Mitglieder</button></a>
 <a class="weiter" href="gebiet.html"><button  
 id="top">UnserGebiet</button></a>
 <a class="weiter" href="kontakt.html"><button id="top">Kontakt</button></a>
</nav>

Upvotes: 0

Views: 44

Answers (2)

Kingswell
Kingswell

Reputation: 146

Position absolute and fixed both use the DOM as reference eg the top left of the screen and treated as the top priority for the display. as such the last "Top" class you assign will be on top. if you assign another ID to one of the buttons and use a directional CSS instruction:

    #Bottom{right:100px;}

you will see the divs start to move apart.

so in summary the fixed and absolute treat all assigned items as top priority in order of the html and move them to the top left of the screen.

Upvotes: 0

Aftab Khan
Aftab Khan

Reputation: 3923

  • It is a expected behavior with position: absolute|fixed.
  • These positioning gives you more granular control over placing the buttons where you exactly want it to be.
  • You can use top left right and bottom to give exact pixel perfect positioning you want.

Further reading: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Upvotes: 1

Related Questions