2

I have a fixed header, so that when I scroll it remains at the top of the page so that visitors may navigate quickly or skip sections of the page.

Here is a picture of my problem:

enter image description here

The problem is pretty simple - I want my header to float over the top of any other objects instead of being hidden by them, but I assume there isn't a way to do it without javascript. Here is my CSS:

#primary header {
position: fixed;
margin: 0;
padding: 0; 
width: 100%;
height: 50px;
background-color: rgb(49,49,49);
}
nav { /* positions nav menu */
position: fixed; /* keeps the nav bar fixed at top when scrolling */
top: 1.25%;
left: 27%;

}
nav a {
margin: 0 50px;
padding: 10px 20px;
font-size: 20px;
}

Anyway I can do this? I am not familiar with Javascript, but would love some help!

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
Chris Johnson
  • 425
  • 1
  • 8
  • 19
  • 1
    Looks like you just need to use the [css z-index property](http://www.w3schools.com/CSSref/pr_pos_z-index.asp) – Razzildinho Jun 09 '14 at 14:24

2 Answers2

7

Set the css z-index property on your fixed element. The higher the value, most in front it will get...

Like: 

#primary header   {
    z-index: 999; /* SET THE NEEDED AMOUNT */
}
LcSalazar
  • 16,524
  • 3
  • 37
  • 69
1

The z-index property is a common solution to elements which are positioned, but it looks like YouTube has provided a solution as well.

Add a parameter to force YouTube iframe to set a low z-index.

If you have any element you’ll like to show above a YouTube iframe you just have to add a parameter to the iFrame URL.

Ricard Torres' Personal Blog

<iframe width="560" height="315" src="//www.youtube.com/embed/0HxNtWEIKhQ?wmode=transparent" frameborder="0" allowfullscreen></iframe>

JSFiddle didn't seem to reproduce the issue, but here is an example as well:

JSFiddle Example

StackOverflow Duplicate Question

YouTube API Documentation (Preferable Embedding Method)

Community
  • 1
  • 1
Mike Soule
  • 732
  • 1
  • 6
  • 11
  • If I misinterpreted your question, I do apologize. If you need to control all page elements then, LcSalazar's post is the most accurate. Here is the JSFiddle example for that: http://jsfiddle.net/uLKhJ/ – Mike Soule Jun 09 '14 at 14:50