Form not responding to CSS as expected

Question

Nothing is happening when I change the value of left, top, right. It stays at the same place. I also tried changing the position attribute but nothing is happening.

What am I doing wrong?

.PHP_A {
  position: static;
  left: 200px;
  top: 400px;
  right: 200px;
  z-index: 1;
  background: #ccccff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

<div class="PHP_A">
  <form action="#" method="post">
    Course Name:PHP_A</br>
    </br>
    Course Duration:100 HOURS</br>
    </br>
    CourseFees:$1000</br>
    </br>
    </br>
    </br>
    <input type="submit" name="submit" value="APPLY" />
  </form>
</div>
</br>
</br>

According to documentation for `position:static`: "The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value." See [position @ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values). — showdev, Feb 02 '18 at 18:55
Your position is static, adjusting top, left or the other 2 will not do anything when position is static — Huangism, Feb 02 '18 at 18:56
The commenters are correct-- if you want to move the form relative to its current position use `position: relative`; if you want to position it relative to the first relatively positioned parent use `position: absolute`. — Alexander Nied, Feb 02 '18 at 18:57
To help clarify, please describe specifically how you want to position the element. — showdev, Feb 02 '18 at 18:58
Incidentally, there is no `` element; I suggest `
` instead. See [What is the main difference of
and ](https://stackoverflow.com/questions/28512655/what-is-the-main-difference-of-br-and-br) and [HTML 5: Is it
,
, or
?](https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br) — showdev, Feb 02 '18 at 19:06

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

You want to change position static to position absolute or even position fixed that will depend on your use case.

https://www.w3schools.com/cssref/pr_class_position.asp

static: Default value. Elements render in order, as they appear in the document flow

absolute: The element is positioned relative to its first positioned (not static) ancestor element

fixed: The element is positioned relative to the browser window

<style>
.PHP_A
{
  position: absolute;
  left: 200px;
  top: 400px;
  right: 200px;
  z-index: 1;
  background: #ccccff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;   
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
</style>
<div class="PHP_A">
  <form action="#" method="post">
    Course Name: PHP_A </br></br>
    Course Duration: 100 HOURS </br></br>
    CourseFees: $1000 </br></br>
    </br></br> 
    <input type="submit" name="submit" value="APPLY" />
  </form>
</div>

score 0 · Answer 2 · answered Feb 02 '18 at 18:59

the portion of the code "position:static;" was the problem it was making your div to align in a pre defined structure css of document flow, instead you should use "position:relative" I have modified your css a little bit now you can give any value to left or right and see the result

<style>
.PHP_A
{
  position:absolute;
  left: 10%;
  top: 40px;
  right: 200px;
  z-index: 1;
  background: #ccccff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;   
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
</style>

Form not responding to CSS as expected

2 Answers2