CODEWITHSUNDEEP
htmlcss
MY PC
MY PC

Reputation: 151

Form not responding to CSS as expected

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>

Upvotes: 1

Views: 202

Answers (2)

Adern Nerk
Adern Nerk

Reputation: 330

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>

Upvotes: 0

Michal
Michal

Reputation: 5220

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>

Upvotes: 3

Related Questions