Question 167450 in Html Question posted in
Some basic documentation can be found here.

Html – my elements are not getting shifted to right

.p_relative1 {
  position: relative;
  left: 100px;
  top: 100px;
}

.p_relative2 {
  position: relative;
  left: 200px;
  top: 120px;
}

.p_relative3 {
  position: relative;
  left: 300px;
  top: 140px;
}

.p_relative4 {
  position: relative;
  left: 400px;
  top: 160px;
}
<p class="p_relative1">relative1</p>
<p class="p_relative2">relative2</p>
<p class="p_relative3">relative3</p>
<p class="p_relative4">relative4</p>

As per MDN I assumed my elements will keep shifting to the right by 100px everytime I use an increment value of 100 px for left as give in my css snippet: position: relative1;left: 100px;``position: relative2;left: 200px;``position: relative3;left: 300px;``position: relative4;left: 400px; but it happens only for relative1 and relative2 elements.why is that so?

Tags:

2

Answers


  1. 0

    In some places you have written x instead of px – please fix it (example: 100x -> 100px )

    Login or Signup to reply.
  2. 0

    There is some typos in your code, write left: 300px; instead of left: 300x;

      .p_relative1 {
      position: relative;
      left: 100px;
      top: 100px;
    }

    .p_relative2 {
      position: relative;
      left: 200px;
      top: 120px;
    }

    .p_relative3 {
      position: relative;
      left: 300px;
      top: 140px;
    }

    .p_relative4 {
      position: relative;
      left: 400px;
      top: 160px;
    }
    <p class="p_relative1">relative1</p>
<p class="p_relative2">relative2</p>
<p class="p_relative3">relative3</p>
<p class="p_relative4">relative4</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search