Fixed position navigation bar

Question

I have a navigation bar that I would like to keep at a fixed position (top), on my website. I would also like for the navigation bar to have some transparency. I applied the transparency to the navigation bar, which also makes any content (child elements) inside that div also inherit the transparency. So, to solve that I applied a relative position to the content inside of the navigation bar, but now the content that is supposed to appear fixed (inside the navigation bar) scrolls with the rest of the page content. How can I fix this?

fiddle

Answer 1

Don't use opacity in this case, use RGBa for the background of the navigation bar background: rgba(0,0,0,.5); (and filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F000000, endColorstr=#0F000000); for IE 8 and older). All children inherit the opacity value and there is nothing you can do to about it (except setting the parent's opacity back to 1 again, in which case you won't have semi-transparency on the parent anymore).

Demo (changed back to original structure with navigation content inside navigation container and RGBa)

Demo#2 (uses current structure and opacity , changed position for navigation content to fixed )

Answer 2

Why not add another transparency rule into your CSS for the elements inside the nav bar, to override the one which they inherit from the bar? Changing the position attribute shouldn't be necessary, I don't see how this will affect transparency.

Answer 3

您可以使用CSS伪选择器:children并将不透明度设置为1.这将使该元素的所有子元素都不透明。