CODEWITHSUNDEEP
css
tommyd456
tommyd456

Reputation: 10713

Overlay not affecting all areas of page

I'm trying to apply an overlay to create an effect similar to https://fancy.com when the login or signup link is clicked i.e the background should be dimmed.

The problem is that my nav bar and content boxes are not subjected to the overlay for some reason but not sure why?

I have created a fiddle to explain: https://jsfiddle.net/p861yfLp/1/

My Code:

<body>
  <div class="overlay">
    <nav>
      Menu
    </nav>
    <div id="content">
      <div class="box">
        Box
      </div>
    </div>
  </div>
</body>

Upvotes: 2

Views: 170

Answers (2)

Thomas De Marez
Thomas De Marez

Reputation: 666

Change these files

CSS - set the position to absolute

.overlay {
      position: absolute;
}

EDIT: Following @DaniP answer the changes to the css are not required if you want a 'modal' feel for the overlay. Tho if you want to overlay everything I would recommend using the absolute position.

HTML - no need to make your overlay contain all other html

<body>
    <div class="overlay"></div>
    <nav>
        Menu
    </nav>
    <div id="content">
        <div class="box">
            Box
        </div>
    </div>
</body>

Now your overlay will 'overlay'.

Upvotes: 3

MattDiMu
MattDiMu

Reputation: 5003

The half-black background-color is actually applied, but the nav (as child-element) has its own background-color (#FFF) defined. If you remove its background-color, it works:

.nav {
  background-color: transparent;
}

https://jsfiddle.net/rw60gzbz/

Upvotes: 0

Related Questions