JS-152-AdvancedCSS
  • Introduction
  • CSS: OVERVIEW
    • 0.01: Selectors and Combinators
    • 0.02: Measurements
    • 0.03: Design
    • 0.04: User Experience
    • 0.05: User Interface
  • Part 1: Flexbox and Grids
    • 1.0: Intro
    • 1.1: Parents with Many Children
    • 1.2: Grids
    • 1.3: Layouts
    • 1.4: Mastering the Concepts
    • 1.5: Resources
    • 1.6: Glossary
  • Part 2: Borders and Shapes
    • 2.0: Borders
    • 2.1: Borders
    • 2.2: Borders
  • Part 3: Colors
    • 3.0: Colors
    • 3.1: Gradients
  • Part 4: Shadow and Transforms
    • 4.0: Shadows
  • Part 5: Positioning
    • 5.0: Intro
    • 5.1: Static
    • 5.2: Relative
    • 5.3: Fixed
    • 5.4: Sticky
    • 5.5: Absolute
    • 5.6: Z-index
    • 5.7: Glossary
  • Part 6: Media Queries
  • Part 7: Transitions
    • 7.0: Transitions
  • Part 8: Animations
    • 8.0: Animations
  • Part 9: Shadows and Transforms
    • 9.0: Module 9.0
  • Eleven Fifty Style Guide
Powered by GitBook
On this page
  • }
  • Explore More
  1. Part 5: Positioning

5.2: Relative

An element that has a position of relative

  • Will remain on the page according to normal flow of page.

  • It _WILL _be affected by other positional properties and values.

Working off the same code that we just did in 5.1, make the following changes

  1. comment out squareGreen

```css .squareBlue{ position: relative; width: 200px; height: 200px; top: 100px; left: 100px;

}

Where is squareBlue positioned? What is it positioned relative to?

Uncomment squareGreen. What happens? What is squareBlue positioned relative to now?

Explore More

Experiment with different values for the margin, top and left properties.

Then try the following margin values:

  • 300px

  • 50px

  • 0px

Now, leaving the margin at 0px, try these values for the top property:

  • 550px

  • 50px

  • 0px

Experiment with changing both the margin and top values together.

Previous5.1: StaticNext5.3: Fixed

Last updated 7 years ago