{"json_modified": "2016-08-27T01:51:30.764967", "uuid": "6d0cbc00-f716-4dfe-9cd7-24aee0513ba0", "title": "Practical positioning examples", "url": "/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples", "tags": ["absolute", "Beginner", "CSS", "Learn", "Article", "CodingScripting", "beginner", "Guide", "fixed", "relative", "Layout"], "translations": [], "modified": "2016-08-27T01:51:30", "label": "Practical positioning examples", "localization_tags": [], "locale": "en-US", "id": 185444, "last_edit": "2016-08-27T01:51:19", "summary": "So that rounds off our look at positioning \u2014 by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to building some interesting UI features. Don't worry if you didn't get this all immediately \u2014 positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "A_tabbed_info-box", "title": "A tabbed info-box"}, {"id": "General_setup", "title": "General setup"}, {"id": "Styling_our_tabs", "title": "Styling our tabs"}, {"id": "Styling_the_panels", "title": "Styling the panels"}, {"id": "Adding_our_JavaScript", "title": "Adding our JavaScript"}, {"id": "A_fixed_position_tabbed_info-box", "title": "A fixed position tabbed info-box"}, {"id": "HTML_additions", "title": "HTML additions"}, {"id": "Changes_to_the_existing_CSS", "title": "Changes to the existing CSS"}, {"id": "Styling_the_main_content", "title": "Styling the main content"}, {"id": "A_sliding_hidden_panel", "title": "A sliding hidden panel"}, {"id": "Styling_the_form_elements", "title": "Styling the form elements"}, {"id": "Styling_the_panel", "title": "Styling the panel"}, {"id": "Setting_the_checked_state", "title": "Setting the checked state"}, {"id": "Summary", "title": "Summary"}], "slug": "Learn/CSS/CSS_layout/Practical_positioning_examples", "review_tags": []}