Jump to content
Peztis

Why does the top cover text?

Recommended Posts

First of all, I am sooo new at this and if I am to learn I need to understand why things behave the way they do.

I am using W3.css only in this test (copying a little here and a little there) and my problem is that when looking at it in the browser, the grey box with CAPITALS (the first div) is covering up the first div in sections, the title London does not show.

1, Why? It must have something to do with w3-top because if I delete that, the CAPITALS will not cover London. But of course it is no longer stuck to the top.

2, What is the solution? I added an empty div (<div class="w3-container w3-padding-32">  </div>) right under the CAPITALS and it works but it feels like "cheating". I assume it can be fixed with a css as well. What would be the "proper way" to fix it? And how?

Thanks!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>

    <body>
  
        <!-- TOP -->
        <div class="w3-top">
            <div class="w3-container w3-grey">
                <h2>CAPITALS</h2>
            </div>
        </div>
  
        <!-- SECTIONS -->
        <section>
            <div class="w3-container w3-light-blue w3-left-align">
                <h2>London</h2>
                <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
            </div>
                
            <div class="w3-container w3-blue w3-center">
                <h2>Paris</h2>
                <p>The Paris area is one of the largest population centers in Europe, with more than 2 million inhabitants.</p>
            </div>
                
            <div class="w3-container w3-indigo w3-right-align">
                <h2>Tokyo</h2>
                <p>Tokyo is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
            </div>
        </section>
  
        <!-- FOOTER -->
        <footer class="w3-container w3-deep-purple w3-center">
         <p>Footer © 2019</p>
        </footer>
  
    </body>
</html>
Edited by Peztis

Share this post


Link to post
Share on other sites

position: fixed takes the element out of the flow of other elements, other elements will occupy the space it would have occupied, so you need to add padding the same height as the w3--top element to force it back into view.

  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...