CODEWITHSUNDEEP
htmlcss
Dalibor Slavík
Dalibor Slavík

Reputation: 61

Fixed menu overlps begin of the element

I have fixed DIV element at the top of the screen and when I click in menu on item to scroll to a certain DIV so the DIV scrolls but it overlaps begin of the text because of the fixed element.

The code is:

<div class="fix">Fixed element</div>
<a href="#element">Link to elemnt's ID</a>

<div id="element">
Begin of the text is here<br>

SOME text
</div>

Here is the fiddle of the problem http://jsfiddle.net/dr6rw/

Upvotes: 1

Views: 56

Answers (3)

d.bayo
d.bayo

Reputation: 164

the z-index property is your best way to achieve this just set the non-fixed div with a relative positioning and add a z-index greater than the fixed div's z-index

your new css should look like this

body {height:1000px;}

.fix {
background:black;
color:white;
position:fixed;
top:0;
width:100%;
z-index:1;
}

a {
position:relative;
top:20px;
}

#element {
height:500px;
width:400px;
margin-top:200px;
background:red; 
z-index:2;      
position:relative; //Relative positioning
}

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99484

That's because the page scrolls to the top of the box. You could push the box's content down by using a padding-top or border-top property as follows:

EXAMPLE HERE

#element {
    height:500px;
    width:400px;

    margin-top:180px;             /* 180px + 20px = 200px */
    border-top: 20px solid white; /* Use a 20px white top border */

    background:red;
}

Upvotes: 1

SW4
SW4

Reputation: 71160

Demo Fiddle

Add z-index:1; to the CSS for .fix

or if you want the content to overlap the fixed div, see this example

z-Index from MDN:

The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

For a positioned box, the z-index property specifies:

  1. The stack level of the box in the current stacking context.
  2. Whether the box establishes a local stacking context.

Upvotes: 0

Related Questions