Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS positioning: why would I set an entire document to relative?

CSS positioning: why would I set an entire document to relative?

Problem

I am working with a tutorial to build a fixed circular navigation from Codrops. http://bit.ly/1nrUH6x.

The navigation is working fine on the site that I've implemented it on, but one requirement I don't understand is found in the CSS:

* {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   list-style: none;
   position: relative;
}

Why would I set everything (*) to relative? If I comment this out the navigation stops working, but if I leave it in I'm having trouble mixing Relative and absolute positioning to position my video play buttons and captions. Can anyone explain the purpose of the above code?

Apologies if this is unclear, I'm new to StackOverflow. I created a JSFiddle that contains the relevant code

http://jsfiddle.net/3sgKL/

although the icons don't show up on the circular menu on the fiddle (they show up fine on my website.)

Thanks!

Problem courtesy of: user3663110

Solution

That's not required for all the elements. You need to include box-sizing:border-box and position:relative attributes to the ul, li and a elements alone. It's mainly used to make the icons to sit at the center of the circular navigation. If you remove them, then the icons will placed at the top of the navigation misaligned.

You can try this:

// this will target only within the circular navigation
.cn-wrapper ul,.cn-wrapper li, .cn-wrapper a { 
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      position: relative
    }

Now you can apply css for your video play buttons, etc :)

Solution courtesy of: mohamedrias

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS positioning: why would I set an entire document to relative?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×