CSS html elemek a fixed elem alá csúsznak?
Van egy sidebar és a tartalom. Ha a sidebar fixed, akkor a tartalom alá csúszik. Hogyan tudnám azt megcsinálni, hogy a sidebar fixed legyen és ne csússzon alá semmi? A clear:both nem jó!
.sidebar {
display: table;
position: fixed;
top: 0;
left: 0;
...
}
.section {
display: table;
margin: 20px auto;
}
<body>
<nav class="sidebar">
..
</nav>
<section class="section">
..
</section>
</body>
válasza:A fixed olyan, mintha a képernyőre rajzolnál filccel. Más síkon van, mint a többi elem. A legegyszerűbb az, ha egy sidebar szélességű margót raksz a tartalomnak arra az oldalára, így a sidebar alatti hely üres marad.
Kis megjegyzés : nekem eléggé úgy tűnik, hogy a display paramétert nem rendeltetésszerűen használod. A sidebar és a section miért table-ként legyen kijelezve?
válasza:1. block elemekre is hat a margin: auto
2. sidebar-ra tegyél egy magasabb z-indexet, hogy a többi egyenrangú elem fölött legyen.
3. fixed elemeknek célszerű a fix méreteit (vagy a viszonyított méreteit) ismerni/megadni, különben nem működnek megfelelően (0-ra esik a meg nem adott méret). Méretmegadáshoz és pozícionáláshoz is használhatod css-ben a calc-ot. pl.: width: calc(100% - 200px);
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!